1
This commit is contained in:
Vinjor
parent
767ace6f3e
commit
783a6d8ab2
616
pages/notice/report.vue
Normal file
616
pages/notice/report.vue
Normal file
@ -0,0 +1,616 @@
|
||||
<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>
|
||||
BIN
static/detail/bg.png
Normal file
BIN
static/detail/bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
static/detail/juxing.png
Normal file
BIN
static/detail/juxing.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
static/detail/qiehuan.png
Normal file
BIN
static/detail/qiehuan.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
BIN
static/detail/warn.png
Normal file
BIN
static/detail/warn.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 936 B |
Loading…
Reference in New Issue
Block a user