dianliang/dl_uniapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
6ee0c121b2
dl_uniapp/pages/notice/report.vue

759 lines
17 KiB
Vue
Raw Normal View History

1
2025-04-03 16:46:34 +08:00
<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">
报名功能
2025-04-09 15:42:01 +08:00
<image class="dl-image" :src="'/static/platform/'+noticeDetail.platformCode+'.png'" mode="aspectFit">
</image>
<view class="dl-text">{{noticeDetail.title||''}}</view>
1
2025-04-03 16:46:34 +08:00
</view>
<view class="end-date-box">
报名功能
2025-04-09 15:42:01 +08:00
<view class="end-date">截止日期：{{noticeDetail.endDate||''}}</view>
1
2025-04-03 16:46:34 +08:00
</view>
<!-- 主体内容区域 -->
<view class="main-content">
<!-- 会员开通 -->
报名功能
2025-04-09 15:42:01 +08:00
<view class="dl-member-box" @click="goMemberCard()" v-if="!rightInfo.manyCardReport">
1
2025-04-03 16:46:34 +08:00
<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>
<!-- 添加更多名片 -->
报名功能
2025-04-09 15:42:01 +08:00
<view class="add-more-card" @click="goSignCard()" v-else>
1
2025-04-03 16:46:34 +08:00
<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 -->
报名功能
2025-04-09 15:42:01 +08:00
<image :src="'/static/platform/'+item.platformCode+'.png'" mode="aspectFit"></image>
<text>{{item.platformName+'博主'}}</text>
1
2025-04-03 16:46:34 +08:00
</view>
<view class="card-content">
<view class="card-person-info">
<view class="card-name">
报名功能
2025-04-09 15:42:01 +08:00
<view>{{item.accountName}}</view>
1
2025-04-03 16:46:34 +08:00
</view>
</view>
</view>
<view class="card-bottom">
<view class="fans-dom">
报名功能
2025-04-09 15:42:01 +08:00
粉丝 {{ formatNumberWithUnits(item.fansNum) }}
1
2025-04-03 16:46:34 +08:00
</view>
<view class="change-dom-bg">
</view>
报名功能
2025-04-09 15:42:01 +08:00
<view class="change-dom" @click="goMyCard()">
1
2025-04-03 16:46:34 +08:00
切换
</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">
报名功能
2025-04-09 15:42:01 +08:00
<uni-forms>
<uni-forms-item v-for="(it,idx) in signFormData.customForm" :label="it.label" required
labelWidth="100">
<uni-easyinput v-model="signFormData.customForm[idx].value" placeholder="请输入" />
1
2025-04-03 16:46:34 +08:00
</uni-forms-item>
</uni-forms>
</view>
</view>
<!-- 联系方式 -->
<view class="custom-form-box" style="padding: 0 25rpx;">
<view class="field-form-box">
报名功能
2025-04-09 15:42:01 +08:00
<uni-forms ref="signForm" :modelValue="signFormData" :rules="signRules">
<uni-forms-item label="联系方式" required labelWidth="100" name="tel">
<uni-easyinput type="number" v-model="signFormData.tel" placeholder="请输入微信/手机号" />
1
2025-04-03 16:46:34 +08:00
</uni-forms-item>
</uni-forms>
</view>
</view>
<!-- 收件地址 -->
报名功能
2025-04-09 15:42:01 +08:00
<view class="custom-addr-box" v-if="userAddr">
1
2025-04-03 16:46:34 +08:00
<view class="left-text">收件地址</view>
<view class="right-text">
报名功能
2025-04-09 15:42:01 +08:00
<text>{{userAddr.cityName}}</text>
<text>{{userAddr.detail}}</text>
<text>{{userAddr.name}}</text>
<text>{{userAddr.tel}}</text>
1
2025-04-03 16:46:34 +08:00
</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';
报名功能
2025-04-09 15:42:01 +08:00
import {
getSignCard
} from '@/api/business/signCard.js'
import {
getNoticeDetail
} from '@/api/business/notice';
import {
hasRights
} from '@/utils/common.js'
import rightsCode from '@/utils/rightsCode.js'
import {
getUserAddress
} from '@/api/business/member.js'
1
2025-04-03 16:46:34 +08:00
export default {
components: {
navigationBarVue
},
data() {
return {
报名功能
2025-04-09 15:42:01 +08:00
signRules: {
// 对联系方式字段进行必填验证
tel: {
// tel 字段的校验规则
rules: [
// 校验 tel 不能为空
{
required: true,
errorMessage: '请填写联系方式',
}
]
}
},
noticeId: null,
1
2025-04-03 16:46:34 +08:00
//使用的会员卡数组
报名功能
2025-04-09 15:42:01 +08:00
cardList: [],
1
2025-04-03 16:46:34 +08:00
// 基础表单数据
// 联系方式表单
报名功能
2025-04-09 15:42:01 +08:00
signFormData: {
tel: null,
customForm: []
},
//通告详情
noticeDetail: {
id: "",
title: "",
endDate: null,
feeDown: null,
feeUp: null,
needNum: null,
userId: null,
brand: null,
fansDown: null,
fansUp: null,
city: null,
bloggerTypes: null,
updateTime: null,
approvalStatus: '0',
viewNum: 0,
detail: null,
platformCode: "",
platformName: "",
//通告产品图
imageArray: []
1
2025-04-03 16:46:34 +08:00
},
// 校验规则
rules: {
name: {
rules: [{
required: true,
errorMessage: '姓名不能为空'
}]
},
age: {
rules: [{
required: true,
errorMessage: '年龄不能为空'
}, {
format: 'number',
errorMessage: '年龄只能输入数字'
}]
}
},
报名功能
2025-04-09 15:42:01 +08:00
rightInfo: {
manyCardReport: false,
superReport: false
},
userAddr: null
}
},
onShow() {
this.getRightsCode()
},
onLoad(params) {
this.noticeId = params.noticeId
if (this.noticeId) {
this.getDetail()
1
2025-04-03 16:46:34 +08:00
}
报名功能
2025-04-09 15:42:01 +08:00
this.getCard()
this.userAddress()
let that = this
uni.$on('updateCard', function(data) {
that.updateCard(data)
})
1
2025-04-03 16:46:34 +08:00
},
methods: {
报名功能
2025-04-09 15:42:01 +08:00
userAddress() {
getUserAddress().then(res => {
if (res.data && res.data.length > 0) {
this.userAddr = res.data[0]
}
})
},
updateCard(data) {
console.log(data, 211);
this.cardList = data
},
/**
* 跳转名片列表
*/
goMyCard() {
this.$tab.navigateTo('/pages/mine/card/my-card?ifChoose=true&noticeId=' + this.noticeId)
},
1
2025-04-03 16:46:34 +08:00
/**
* 数值单位转换
* @param {Object} number
*/
formatNumberWithUnits(number) {
return formatNumberWithUnits(number)
},
报名功能
2025-04-09 15:42:01 +08:00
getRightsCode() {
let info = hasRights(rightsCode.manyCardReport)
if (!info) {
this.rightInfo.manyCardReport = false
} else {
this.rightInfo.manyCardReport = true
}
},
goSignCard() {
this.$tab.navigateTo('/pages/mine/card/my-card')
},
goMemberCard() {
this.$tab.navigateTo('/pages/mine/member/member-card')
},
getDetail() {
getNoticeDetail({
noticeId: this.noticeId
}).then(res => {
if (res.code == 200) {
this.noticeDetail = res.data.noticeDetail
if (this.noticeDetail.customForm.length > 0) {
this.noticeDetail.customForm.forEach(it => {
this.signFormData.customForm.push({
label: it,
value: ''
})
})
}
}
console.log(this.signFormData, 269);
}).catch((e) => {
this.isTriggered = false
uni.showToast({
icon: 'error',
duration: 2000,
title: e
});
})
},
/**
* 报名
*/
getCard() {
getSignCard({
noticeId: this.noticeId
}).then(res => {
if (this.cardList.length == 0) {
this.cardList.push(res.data.list[0])
}
}).catch((e) => {
uni.showToast({
icon: 'error',
duration: 2000,
title: e
});
})
},
1
2025-04-03 16:46:34 +08:00
submit() {
报名功能
2025-04-09 15:42:01 +08:00
this.$refs.signForm.validate().then(res => {
1
2025-04-03 16:46:34 +08:00
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;
}
}
}
}
}
报名功能
2025-04-09 15:42:01 +08:00
</style>
Reference in New Issue Copy Permalink