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

848 lines
19 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-10 10:12:52 +08:00
<view class="change-dom" @click="goSignCard()">切换</view>
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>
1
2025-04-10 10:12:52 +08:00
<view class="card-fans-dom">
<view class="fans-box">
<image src="@/static/mine/fans.png" mode="aspectFit"></image>
<view class="fans-num">{{ formatNumberWithUnits(item.fansNum) }}</view>
</view>
</view>
1
2025-04-03 16:46:34 +08:00
</view>
<view class="card-bottom">
1
2025-04-10 10:12:52 +08:00
<view class="item-field-row">
<view class="item-lable is-required">
自报价
</view>
<view class="item-value">
<input class="uni-input" v-model="dataObj.name" type="number" placeholder="请输入" />
</view>
1
2025-04-03 16:46:34 +08:00
</view>
1
2025-04-10 10:12:52 +08:00
<view class="item-field-row">
<view class="item-lable is-required">
附言
</view>
<view class="item-value">
<input class="uni-input" v-model="dataObj.name" type="text" placeholder="请输入" />
</view>
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>
报名功能
2025-04-10 09:36:39 +08:00
1
2025-04-03 16:46:34 +08:00
<!-- 收件地址 -->
报名功能
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">
报名功能
2025-04-10 09:36:39 +08:00
<view class="supper-report" @click="submit('1')">
1
2025-04-03 16:46:34 +08:00
超级报名
<image class="dl-vip" src="@/static/index/vip.png" mode="aspectFit"></image>
</view>
报名功能
2025-04-10 09:36:39 +08:00
<view class="report-dom" @click="submit('0')">
1
2025-04-03 16:46:34 +08:00
报名
</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 {
报名功能
2025-04-10 09:36:39 +08:00
getSignCard,
userSign
报名功能
2025-04-09 15:42:01 +08:00
} 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: {
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: ''
})
})
}
}
}).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
});
})
},
报名功能
2025-04-10 09:36:39 +08:00
submit(isSuper) {
if (isSuper == '1') {
let flag = hasRights(rightsCode.superReport)
if (!flag) {
uni.showToast({
title: '无超级报名权益',
icon: 'none',
duration: 1000
})
return
}
}
//处理卡片
this.signFormData.noticeId = this.noticeId
this.signFormData.cardList = this.cardList
if (this.userAddr) {
this.signFormData.addressId = this.userAddr.id
}
this.signFormData.isSuper = isSuper
userSign(this.signFormData).then(res => {
1
2025-04-03 16:46:34 +08:00
uni.showToast({
报名功能
2025-04-10 09:36:39 +08:00
title: '报名成功',
duration: 1000
1
2025-04-03 16:46:34 +08:00
})
报名功能
2025-04-10 09:36:39 +08:00
setTimeout(() => {
uni.navigateBack()
}, 1000);
1
2025-04-03 16:46:34 +08:00
})
}
}
}
</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;
1
2025-04-10 10:12:52 +08:00
padding: 30rpx;
1
2025-04-03 16:46:34 +08:00
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;
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;
}
1
2025-04-10 10:12:52 +08:00
.change-dom {
display: flex;
align-items: center;
justify-content: center;
padding: 8rpx 30rpx;
font-size: 26rpx;
background-color: #FC1F3E;
color: white;
border-radius: 30rpx;
}
1
2025-04-03 16:46:34 +08:00
}
.card-content {
margin-top: 10rpx;
width: 100%;
1
2025-04-10 10:12:52 +08:00
padding-bottom: 10rpx;
1
2025-04-03 16:46:34 +08:00
display: flex;
align-items: center;
justify-content: flex-start;
1
2025-04-10 10:12:52 +08:00
border-bottom: 1rpx solid #F2F2F2;
1
2025-04-03 16:46:34 +08:00
.card-person-info {
display: flex;
1
2025-04-10 10:12:52 +08:00
align-items: center;
1
2025-04-03 16:46:34 +08:00
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;
}
}
}
1
2025-04-10 10:12:52 +08:00
.card-fans-dom {
margin-left: 30rpx;
display: flex;
align-items: center;
justify-content: start;
.fans-box {
max-width: 200rpx;
margin-right: 10rpx;
font-size: 18rpx;
display: flex;
align-items: center;
justify-content: center;
background-color: #FEF4EF;
padding: 5rpx 15rpx;
color: #FE9860;
border-radius: 20rpx;
image {
height: 20rpx;
width: 20rpx;
margin-right: 8rpx;
}
}
}
1
2025-04-03 16:46:34 +08:00
}
.card-bottom {
width: 100%;
display: flex;
align-items: center;
1
2025-04-10 10:12:52 +08:00
flex-direction: column;
1
2025-04-03 16:46:34 +08:00
justify-content: flex-start;
margin-top: 20rpx;
position: relative;
1
2025-04-10 10:12:52 +08:00
.item-field-row {
width: 100%;
1
2025-04-03 16:46:34 +08:00
display: flex;
1
2025-04-10 10:12:52 +08:00
align-items: self-start;
1
2025-04-03 16:46:34 +08:00
justify-content: start;
1
2025-04-10 10:12:52 +08:00
padding-bottom: 15rpx;
padding-top: 15rpx;
border-bottom: 1rpx solid #F2F2F2;
1
2025-04-03 16:46:34 +08:00
1
2025-04-10 10:12:52 +08:00
.img-upload {
width: 50%;
margin: 10rpx 10rpx;
display: flex;
align-items: center;
justify-content: center;
}
1
2025-04-03 16:46:34 +08:00
1
2025-04-10 10:12:52 +08:00
.is-required {
image {
width: 20rpx;
height: 20rpx;
margin-right: 10rpx;
}
}
.item-lable {
width: 210rpx;
padding: 15rpx 0;
display: flex;
align-items: center;
justify-content: start;
1
2025-04-03 16:46:34 +08:00
1
2025-04-10 10:12:52 +08:00
}
.item-value {
flex: 1;
padding-left: 20rpx;
display: flex;
align-items: center;
justify-content: flex-end;
input {
width: 100%;
padding-left: 20rpx;
line-height: 1;
height: 70rpx;
border: 1rpx solid #dcdfe6;
border-radius: 8rpx;
}
.choose-add {
color: #686868;
padding: 10rpx 0 10rpx 20rpx;
display: flex;
align-items: center;
justify-content: flex-start;
border: 1rpx solid #dcdfe6;
border-radius: 8rpx;
}
textarea {
width: 100%;
height: 150rpx;
color: #686868;
padding: 10rpx 0 10rpx 20rpx;
border: 1rpx solid #dcdfe6;
border-radius: 8rpx;
}
}
1
2025-04-03 16:46:34 +08:00
}
}
}
.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-10 09:36:39 +08:00
</style>
Reference in New Issue Copy Permalink