616 lines
14 KiB
Vue
616 lines
14 KiB
Vue
<template>
|
||
<view class="report-box">
|
||
<navigation-bar-vue style="width: 100%;" title="报名" background-color="#FFFFFF"
|
||
title-color="#3D3D3D"></navigation-bar-vue>
|
||
<view class="notice-detail-last-box">
|
||
<view class="dl-notice-title">
|
||
<image class="dl-image" src="/static/platform/xiaohongshu.png" mode="aspectFit"></image>
|
||
<view class="dl-text">找小红书达人种草【蓝月亮】洗衣液</view>
|
||
</view>
|
||
<view class="end-date-box">
|
||
<view class="end-date">截止日期：2024-03-04</view>
|
||
</view>
|
||
<!-- 主体内容区域 -->
|
||
<view class="main-content">
|
||
<!-- 会员开通 -->
|
||
<view class="dl-member-box" @click="goMemberCard()">
|
||
<view class="dl-left">
|
||
<image class="dl-icon" src="@/static/index/zuanshi.png" mode="aspectFit"></image>
|
||
<text>开通会员 添加更多名片</text>
|
||
</view>
|
||
<view class="dl-right">
|
||
<view class="dl-go-view">立即开通</view>
|
||
</view>
|
||
</view>
|
||
<!-- 添加更多名片 -->
|
||
<view class="add-more-card" @click="goMemberCard()">
|
||
<view class="dl-left">
|
||
<image class="dl-icon" src="@/static/detail/card.png" mode="aspectFit"></image>
|
||
<text>添加更多名片</text>
|
||
</view>
|
||
<view class="dl-right">
|
||
<view class="dl-go-view">立即添加</view>
|
||
</view>
|
||
</view>
|
||
<!-- 名片 -->
|
||
<view class="member-card-box" v-for="(item,index) in cardList">
|
||
<view class="card-title">
|
||
<!-- 需要根据平台code取对应的图片 TODO -->
|
||
<image src="@/static/platform/xiaohongshu.png" mode="aspectFit"></image>
|
||
<text>小红书博主</text>
|
||
</view>
|
||
<view class="card-content">
|
||
<view class="card-person-info">
|
||
<view class="card-name">
|
||
<view>小王同学</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="card-bottom">
|
||
<view class="fans-dom">
|
||
粉丝 {{ formatNumberWithUnits(100000) }}
|
||
</view>
|
||
<view class="change-dom-bg">
|
||
</view>
|
||
<view class="change-dom">
|
||
切换
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 自定义表单 -->
|
||
<view class="custom-form-box">
|
||
<view class="form-title">报名前请填写以下信息：</view>
|
||
<view class="form-warn">
|
||
<image src="@/static/detail/warn.png" mode="aspectFit"></image>
|
||
<text>注意：为了您的信息安全，平台不建议填写您的银行卡号、身份证号、密码等隐私信息。</text>
|
||
</view>
|
||
<view class="field-form-box">
|
||
<uni-forms ref="baseForm" :modelValue="baseFormData">
|
||
<uni-forms-item label="姓名" required>
|
||
<uni-easyinput type="text" v-model="baseFormData.name" placeholder="请输入姓名" />
|
||
</uni-forms-item>
|
||
<uni-forms-item label="年龄" required>
|
||
<uni-easyinput type="number" v-model="baseFormData.age" placeholder="请输入年龄" />
|
||
</uni-forms-item>
|
||
</uni-forms>
|
||
</view>
|
||
</view>
|
||
<!-- 联系方式 -->
|
||
<view class="custom-form-box" style="padding: 0 25rpx;">
|
||
<view class="field-form-box">
|
||
<uni-forms ref="telForm" :modelValue="telFormData">
|
||
<uni-forms-item label="联系方式" required labelWidth="100">
|
||
<uni-easyinput type="number" v-model="baseFormData.name" placeholder="请输入姓名" />
|
||
</uni-forms-item>
|
||
</uni-forms>
|
||
</view>
|
||
</view>
|
||
<!-- 收件地址 -->
|
||
<view class="custom-addr-box">
|
||
<view class="left-text">收件地址</view>
|
||
<view class="right-text">
|
||
<text>中国 山东省 济南市 历城区</text>
|
||
<text>财富中心1007A</text>
|
||
<text>朱春运</text>
|
||
<text>17862909999</text>
|
||
</view>
|
||
<view class="change-addr-dom">切换</view>
|
||
</view>
|
||
</view>
|
||
<!-- 去报名，始终浮动下方 -->
|
||
<view class="dl-bottom-box" v-show="showBottom">
|
||
<view class="supper-report">
|
||
超级报名
|
||
<image class="dl-vip" src="@/static/index/vip.png" mode="aspectFit"></image>
|
||
</view>
|
||
<view class="report-dom" @click="submit()">
|
||
报名
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
formatNumberWithUnits
|
||
} from '@/utils/common.js'
|
||
import navigationBarVue from '@/components/navigation/navigationBar.vue';
|
||
export default {
|
||
components: {
|
||
navigationBarVue
|
||
},
|
||
data() {
|
||
return {
|
||
//使用的会员卡数组
|
||
cardList: ['', ''],
|
||
// 基础表单数据
|
||
baseFormData: {
|
||
name: '',
|
||
age: ''
|
||
},
|
||
// 联系方式表单
|
||
telFormData: {
|
||
tel: ""
|
||
},
|
||
// 校验规则
|
||
rules: {
|
||
name: {
|
||
rules: [{
|
||
required: true,
|
||
errorMessage: '姓名不能为空'
|
||
}]
|
||
},
|
||
age: {
|
||
rules: [{
|
||
required: true,
|
||
errorMessage: '年龄不能为空'
|
||
}, {
|
||
format: 'number',
|
||
errorMessage: '年龄只能输入数字'
|
||
}]
|
||
}
|
||
},
|
||
}
|
||
},
|
||
methods: {
|
||
/**
|
||
* 数值单位转换
|
||
* @param {Object} number
|
||
*/
|
||
formatNumberWithUnits(number) {
|
||
return formatNumberWithUnits(number)
|
||
},
|
||
submit() {
|
||
this.$refs.baseForm.validate().then(res => {
|
||
console.log('success', res);
|
||
uni.showToast({
|
||
title: `校验通过`
|
||
})
|
||
}).catch(err => {
|
||
console.log('err', err);
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.report-box {
|
||
padding-top: calc(90rpx + var(--status-bar-height));
|
||
width: 100%;
|
||
color: #363636;
|
||
background-color: white;
|
||
font-size: 30rpx;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: start;
|
||
position: relative;
|
||
|
||
.notice-detail-last-box {
|
||
width: 100%;
|
||
height: calc(100vh - var(--status-bar-height) - var(--window-bottom) - 90rpx);
|
||
padding-bottom: 115rpx;
|
||
overflow-y: scroll;
|
||
background-color: #F6F6F6;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: self-start;
|
||
justify-content: start;
|
||
position: relative;
|
||
|
||
.dl-notice-title {
|
||
padding: 25rpx;
|
||
display: flex;
|
||
background-color: white;
|
||
border-top: 1rpx solid #F2F2F2;
|
||
width: 100%;
|
||
padding-bottom: 10rpx;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.dl-image {
|
||
flex: none;
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
}
|
||
|
||
.dl-text {
|
||
margin-left: 10rpx;
|
||
flex: 1;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
width: 100%;
|
||
font-weight: bold;
|
||
|
||
}
|
||
}
|
||
|
||
.end-date-box {
|
||
background-color: white;
|
||
width: 100%;
|
||
font-size: 20rpx;
|
||
padding: 0 25rpx 25rpx 25rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: start;
|
||
|
||
.end-date {
|
||
border-radius: 10rpx;
|
||
padding: 6rpx 10rpx;
|
||
background-color: #FFF4F5;
|
||
color: #FC1F3E;
|
||
}
|
||
}
|
||
|
||
.dl-bottom-box {
|
||
border-top: 1rpx solid #EAEAEA;
|
||
color: #363636;
|
||
position: fixed;
|
||
height: 115rpx;
|
||
padding-left: 40rpx;
|
||
padding-right: 40rpx;
|
||
bottom: 0;
|
||
background-color: #F7F7F7;
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.supper-report {
|
||
text-align: center;
|
||
background-color: #F0CCA2;
|
||
color: #181D24;
|
||
padding: 13rpx;
|
||
margin-right: 10rpx;
|
||
flex: 1;
|
||
border-radius: 15rpx;
|
||
position: relative;
|
||
|
||
.dl-vip {
|
||
position: absolute;
|
||
height: 25rpx;
|
||
width: 70rpx;
|
||
top: -10rpx;
|
||
right: -7px;
|
||
}
|
||
}
|
||
|
||
.report-dom {
|
||
text-align: center;
|
||
border-radius: 15rpx;
|
||
background-color: #FC1F3E;
|
||
padding: 13rpx;
|
||
margin-left: 10rpx;
|
||
color: white;
|
||
flex: 1;
|
||
}
|
||
|
||
}
|
||
|
||
.main-content {
|
||
width: 100%;
|
||
padding: 0 30rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.dl-member-box {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 20rpx;
|
||
border-radius: 35rpx;
|
||
justify-content: center;
|
||
padding-right: 30rpx;
|
||
height: 100rpx;
|
||
width: 100%;
|
||
background: url('/static/index/member-bg.png');
|
||
background-size: 100% 100%;
|
||
background-position: center;
|
||
/* 图片居中显示 */
|
||
background-repeat: no-repeat;
|
||
/* 不重复背景图片 */
|
||
|
||
.dl-left {
|
||
display: flex;
|
||
flex: 1;
|
||
padding-left: 30rpx;
|
||
align-items: center;
|
||
font-size: 30rpx;
|
||
color: #623109;
|
||
justify-content: left;
|
||
|
||
.dl-icon {
|
||
width: 60rpx;
|
||
height: 56rpx;
|
||
|
||
}
|
||
}
|
||
|
||
.dl-right {
|
||
.dl-go-view {
|
||
font-size: 28rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-color: #F5D8A5;
|
||
color: #623109;
|
||
padding: 10rpx 25rpx;
|
||
float: right;
|
||
border-radius: 30rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.add-more-card {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 20rpx;
|
||
border-radius: 35rpx;
|
||
justify-content: center;
|
||
padding-right: 30rpx;
|
||
height: 100rpx;
|
||
width: 100%;
|
||
background-image: linear-gradient(to right, #FFE9EC, #FFFFFF);
|
||
|
||
.dl-left {
|
||
display: flex;
|
||
flex: 1;
|
||
padding-left: 30rpx;
|
||
align-items: center;
|
||
font-size: 30rpx;
|
||
color: #FC1F3E;
|
||
justify-content: left;
|
||
|
||
.dl-icon {
|
||
width: 45rpx;
|
||
height: 56rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
|
||
.dl-right {
|
||
.dl-go-view {
|
||
font-size: 28rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-image: linear-gradient(to right, #F88894, #F92D41);
|
||
color: white;
|
||
padding: 10rpx 25rpx;
|
||
float: right;
|
||
border-radius: 30rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.member-card-box {
|
||
width: 100%;
|
||
display: flex;
|
||
padding-top: 30rpx;
|
||
margin-top: 20rpx;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-color: white;
|
||
border-radius: 20rpx;
|
||
background: url('/static/detail/bg.png');
|
||
background-size: 100% 100%;
|
||
/* 让背景图片覆盖整个元素，同时保持图片的比例 */
|
||
background-position: center;
|
||
/* 确保图片在元素中居中 */
|
||
background-repeat: no-repeat;
|
||
|
||
.card-title {
|
||
width: 100%;
|
||
display: flex;
|
||
padding: 0 30rpx;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
image {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
|
||
text {
|
||
padding-left: 10rpx;
|
||
flex: 1;
|
||
}
|
||
|
||
.edit-text {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
text-align: right;
|
||
width: 150rpx;
|
||
}
|
||
}
|
||
|
||
.card-content {
|
||
margin-top: 10rpx;
|
||
width: 100%;
|
||
padding: 0 30rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
|
||
.card-person-info {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: self-start;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
|
||
.card-name {
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: flex-start;
|
||
|
||
.nickname-dom {
|
||
margin-left: 20rpx;
|
||
font-size: 24rpx;
|
||
font-weight: normal;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.card-bottom {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
margin-top: 20rpx;
|
||
position: relative;
|
||
|
||
.fans-dom {
|
||
color: #FC1F3E;
|
||
flex: 1;
|
||
height: 70rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: start;
|
||
padding-left: 30rpx;
|
||
background: url('/static/detail/juxing.png');
|
||
background-size: 100% 100%;
|
||
/* 让背景图片覆盖整个元素，同时保持图片的比例 */
|
||
background-position: center;
|
||
/* 确保图片在元素中居中 */
|
||
background-repeat: no-repeat;
|
||
/* 防止图片重复 */
|
||
border-radius: 0 0 0 20rpx;
|
||
}
|
||
|
||
.change-dom-bg {
|
||
height: 70rpx;
|
||
width: 147rpx;
|
||
}
|
||
|
||
.change-dom {
|
||
height: 70rpx;
|
||
background: url('/static/detail/qiehuan.png');
|
||
background-size: 101% 100%;
|
||
/* 让背景图片覆盖整个元素，同时保持图片的比例 */
|
||
background-position: center;
|
||
/* 确保图片在元素中居中 */
|
||
background-repeat: no-repeat;
|
||
/* 防止图片重复 */
|
||
border-radius: 0 0 20rpx 0;
|
||
padding-left: 20rpx;
|
||
width: 170rpx;
|
||
color: white;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: absolute;
|
||
right: 0;
|
||
bottom: 0;
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
.custom-form-box {
|
||
width: 100%;
|
||
display: flex;
|
||
margin-top: 20rpx;
|
||
padding: 25rpx;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 20rpx;
|
||
background-color: white;
|
||
|
||
.form-title {
|
||
width: 100%;
|
||
font-weight: bold;
|
||
padding-bottom: 15rpx;
|
||
}
|
||
|
||
.form-warn {
|
||
width: 100%;
|
||
font-size: 24rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: start;
|
||
background-color: #FDECD9;
|
||
color: #FF6627;
|
||
border-radius: 20rpx;
|
||
padding: 20rpx;
|
||
|
||
image {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
text {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: start;
|
||
}
|
||
}
|
||
|
||
.field-form-box {
|
||
width: 100%;
|
||
margin-top: 20rpx;
|
||
}
|
||
}
|
||
|
||
.custom-addr-box {
|
||
width: 100%;
|
||
display: flex;
|
||
margin-top: 20rpx;
|
||
padding: 25rpx;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 20rpx;
|
||
background-color: white;
|
||
margin-bottom: 20rpx;
|
||
position: relative;
|
||
|
||
.left-text {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: start;
|
||
width: 160rpx;
|
||
}
|
||
|
||
.right-text {
|
||
flex: 1;
|
||
color: #363636;
|
||
padding-left: 10rpx;
|
||
font-size: 24rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: self-start;
|
||
justify-content: center;
|
||
}
|
||
|
||
.change-addr-dom {
|
||
position: absolute;
|
||
width: 150rpx;
|
||
height: 75rpx;
|
||
right: 0;
|
||
bottom: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-color: #FC1F3E;
|
||
color: white;
|
||
border-radius: 20rpx 0 20rpx 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |