|
@@ -0,0 +1,432 @@
|
|
|
+<template>
|
|
|
+ <view class="container main">
|
|
|
+ <view class="one">
|
|
|
+ <view class="one_1 name">{{info.name||'暂无活动名称'}}</view>
|
|
|
+ <view class="one_1 one_2 text_color">
|
|
|
+ <view class="one_left">
|
|
|
+ <text class="t-icon t-icon-shizhong"></text>
|
|
|
+ <span>{{getTime(info.start_time,info.end_time)||'暂无'}}</span>
|
|
|
+ </view>
|
|
|
+ <view class="one_right"
|
|
|
+ :class="[info.match_status=='0'?'active_1':info.match_status=='1'?'active_2':info.match_status=='2'?'active_3':'active_4']">
|
|
|
+ <text class="t-icon t-icon-shizhong-copy"></text>
|
|
|
+ <span>{{getDict(info.match_status,'status')}}</span>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="one_1 text_color">
|
|
|
+ <text class="t-icon t-icon-gonglve"></text>
|
|
|
+ <span>{{getDict(info.match_type,'type')||'自办'}}</span>
|
|
|
+ </view>
|
|
|
+ <view class="one_1 text_color">
|
|
|
+ <text class="t-icon t-icon-gongsi"></text>
|
|
|
+ <span>{{info.work||'暂无组织单位'}}</span>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="two">
|
|
|
+ <view class="two_1">
|
|
|
+ <view class="two_text">填写报名信息</view>
|
|
|
+ <view class="two_remark">*请如实填报报名信息,方便我们及时与您联系</view>
|
|
|
+ </view>
|
|
|
+ <view class="two_2">
|
|
|
+ <form @submit="formSubmit">
|
|
|
+ <view class="value other">
|
|
|
+ <view class="title">姓名</view>
|
|
|
+ <view class="label">
|
|
|
+ <input name="name" class="input" :value="form.name" placeholder="请输入姓名" />
|
|
|
+ <span v-if="errors.name" class="error-message">{{ errors.name }}</span>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="value other">
|
|
|
+ <view class="title">联系电话</view>
|
|
|
+ <view class="label">
|
|
|
+ <input name="phone" class="input" :value="form.phone" placeholder="请输入联系电话" />
|
|
|
+ <span v-if="errors.phone" class="error-message">{{ errors.phone }}</span>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="value other">
|
|
|
+ <view class="title">报名类型</view>
|
|
|
+ <view class="label">
|
|
|
+ <uni-data-checkbox v-model="form.type" :localdata="signTypeList"
|
|
|
+ :map="{text:'label',value:'value'}" />
|
|
|
+ <span v-if="errors.type" class="error-message">{{ errors.type }}</span>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="value other">
|
|
|
+ <view class="title">公司</view>
|
|
|
+ <view class="label">
|
|
|
+ <input name="company" class="input" :value="form.company" placeholder="请输入公司名称" />
|
|
|
+ <span v-if="errors.company" class="error-message">{{ errors.company }}</span>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="value other" v-if="form.type==='1'">
|
|
|
+ <view class="title">路演名称</view>
|
|
|
+ <view class="label">
|
|
|
+ <input name="project_name" class="input" :value="form.project_name" placeholder="请输入路演名称" />
|
|
|
+ <span v-if="errors.project_name" class="error-message">{{ errors.project_name }}</span>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="value other" v-if="form.type==='1'">
|
|
|
+ <view class="title">路演介绍</view>
|
|
|
+ <view class="label">
|
|
|
+ <input name="project_brief" class="input" :value="form.project_brief"
|
|
|
+ placeholder="请输入路演介绍" />
|
|
|
+ <span v-if="errors.project_brief" class="error-message">{{ errors.project_brief }}</span>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="value other" v-if="form.type==='1'">
|
|
|
+ <view class="title">路演附件</view>
|
|
|
+ <view class="label">
|
|
|
+ <upload class='upload' :list="form.project_file" name="project_file" :count="1"
|
|
|
+ @uplSuc="uplSuc" @uplDel="uplDel">
|
|
|
+ </upload>
|
|
|
+ <span v-if="errors.project_file" class="error-message">{{ errors.project_file }}</span>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="button">
|
|
|
+ <button type="warn" form-type="submit">提交</button>
|
|
|
+ </view>
|
|
|
+ </form>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import upload from '../../components/upload/index.vue';
|
|
|
+ import moment from 'moment';
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ upload
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ user: {},
|
|
|
+ id: '',
|
|
|
+ form: {
|
|
|
+ name: "",
|
|
|
+ type: "",
|
|
|
+ company: "",
|
|
|
+ phone: "",
|
|
|
+ project_name: "",
|
|
|
+ project_brief: "",
|
|
|
+ project_file: []
|
|
|
+ },
|
|
|
+ info: {},
|
|
|
+ signTypeList: [],
|
|
|
+ typeList: [],
|
|
|
+ statusList: [],
|
|
|
+ errors: {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad: async function(e) {
|
|
|
+ const that = this;
|
|
|
+ that.$set(that, `id`, e && e.id || '');
|
|
|
+ await that.searchToken();
|
|
|
+ await that.searchOther();
|
|
|
+ await that.search();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 用户信息
|
|
|
+ searchToken() {
|
|
|
+ const that = this;
|
|
|
+ try {
|
|
|
+ const res = uni.getStorageSync('token');
|
|
|
+ if (res) {
|
|
|
+ const user = that.$jwt(res);
|
|
|
+ that.$set(that, `user`, user);
|
|
|
+ }
|
|
|
+ } catch (e) {}
|
|
|
+ },
|
|
|
+ async searchOther() {
|
|
|
+ const that = this;
|
|
|
+ let res;
|
|
|
+ // 报名类型
|
|
|
+ res = await that.$api(`/dictData`, 'GET', {
|
|
|
+ code: 'signType',
|
|
|
+ is_use: '0',
|
|
|
+ })
|
|
|
+ if (res.errcode == '0') that.$set(that, `signTypeList`, res.data);
|
|
|
+ // 查询状态
|
|
|
+ res = await that.$api(`/dictData`, 'GET', {
|
|
|
+ code: 'matchStatus',
|
|
|
+ is_use: '0',
|
|
|
+ })
|
|
|
+ if (res.errcode == '0') that.$set(that, `statusList`, res.data)
|
|
|
+ // 赛事类型
|
|
|
+ res = await that.$api(`/dictData`, 'GET', {
|
|
|
+ code: 'activeType',
|
|
|
+ is_use: '0',
|
|
|
+ })
|
|
|
+ if (res.errcode == '0') that.$set(that, `typeList`, res.data)
|
|
|
+ },
|
|
|
+ // 查询
|
|
|
+ async search() {
|
|
|
+ const that = this;
|
|
|
+ if (that.id) {
|
|
|
+ let res;
|
|
|
+ res = await that.$api(`/match/${that.id}`, 'GET', {})
|
|
|
+ if (res.errcode == '0') {
|
|
|
+ that.$set(that, `info`, res.data)
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: res.errmsg,
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 处理时间
|
|
|
+ getTime(start_time, end_time) {
|
|
|
+ if (start_time && end_time) {
|
|
|
+ const start = new Date(start_time);
|
|
|
+ const end = new Date(end_time);
|
|
|
+ const weekdays = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
|
|
|
+ const day = start.getDate();
|
|
|
+ const weekday = weekdays[start.getDay()];
|
|
|
+ const month = start.getMonth();
|
|
|
+ const start_hours = start.getHours();
|
|
|
+ const start_minutes = start.getMinutes();
|
|
|
+ const end_hours = end.getHours();
|
|
|
+ const end_minutes = end.getMinutes();
|
|
|
+ return `${month}/${day < 10 ? '0' + day : day} ${weekday} ${start_hours.toString().padStart(2, '0')}:${start_minutes.toString().padStart(2, '0')} - ${end_hours.toString().padStart(2, '0')}:${end_minutes.toString().padStart(2, '0')} `;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 处理字典表
|
|
|
+ getDict(item, model) {
|
|
|
+ const that = this;
|
|
|
+ let res
|
|
|
+ if (model == 'status') res = that.statusList.find(i => i.value == item)
|
|
|
+ else if (model == 'type') res = that.typeList.find(i => i.value == item)
|
|
|
+ if (res) return res.label
|
|
|
+ else return '暂无'
|
|
|
+ },
|
|
|
+ // 图片上传
|
|
|
+ uplSuc(e) {
|
|
|
+ const that = this;
|
|
|
+ that.$set(that.form, `${e.name}`, [...that.form[e.name], e.data]);
|
|
|
+ },
|
|
|
+ // 图片删除
|
|
|
+ uplDel(e) {
|
|
|
+ const that = this;
|
|
|
+ let data = that.form[e.name];
|
|
|
+ let arr = data.filter((i, index) => index != e.data.index);
|
|
|
+ that.$set(that.form, `${e.name}`, arr)
|
|
|
+ },
|
|
|
+ // 自定义的验证函数
|
|
|
+ validateObject(obj) {
|
|
|
+ const that = this;
|
|
|
+ const errors = {};
|
|
|
+ if (!obj.name || obj.name.trim() === '') {
|
|
|
+ errors.name = '请填写姓名!';
|
|
|
+ }
|
|
|
+ if (!obj.type || obj.type.trim() === '') {
|
|
|
+ errors.type = '请选择报名类型!';
|
|
|
+ }
|
|
|
+ if (!obj.phone || obj.phone.trim() === '') {
|
|
|
+ errors.phone = '请填写手机号!';
|
|
|
+ } else {
|
|
|
+ const regex = /^1[3456789]\d{9}$/;
|
|
|
+ if (!regex.test(obj.phone)) errors.phone = '请填写正确的手机号码!';
|
|
|
+ }
|
|
|
+ if (!obj.company || obj.company.trim() === '') {
|
|
|
+ errors.company = '请填写公司名称!';
|
|
|
+ }
|
|
|
+ if (that.form.type == '1') {
|
|
|
+ if (!obj.project_name || obj.project_name.trim() === '') {
|
|
|
+ errors.project_name = '请填写路演名称!';
|
|
|
+ }
|
|
|
+ if (!obj.project_brief || obj.project_brief.trim() === '') {
|
|
|
+ errors.project_brief = '请填写路演简介!';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 如果有错误,返回错误对象
|
|
|
+ if (Object.keys(errors).length > 0) {
|
|
|
+ return errors;
|
|
|
+ }
|
|
|
+ // 如果没有错误,返回null或undefined
|
|
|
+ return null;
|
|
|
+ },
|
|
|
+ async formSubmit(e) {
|
|
|
+ const that = this;
|
|
|
+ var formdata = e.detail.value
|
|
|
+ formdata.type == that.form.type
|
|
|
+ formdata.project_file = that.form.project_file
|
|
|
+ const errorsInfo = await that.validateObject(formdata);
|
|
|
+ // 检查是否有错误
|
|
|
+ if (errorsInfo) {
|
|
|
+ that.$set(that, `errors`, errorsInfo)
|
|
|
+ // 遍历错误对象并显示错误信息
|
|
|
+ for (const key in errorsInfo) {
|
|
|
+ if (errorsInfo.hasOwnProperty(key)) {
|
|
|
+ console.error(`${key} 错误: ${errorsInfo[key]}`);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ that.$set(that, `errors`, {})
|
|
|
+ let res;
|
|
|
+ const data = {
|
|
|
+ user: that.user.id,
|
|
|
+ match: that.info.id,
|
|
|
+ time: moment().format('YYYY-MM-DD HH:mm:ss')
|
|
|
+ }
|
|
|
+ res = await that.$api(`/sign`, 'POST', {
|
|
|
+ ...formdata,
|
|
|
+ ...data
|
|
|
+ })
|
|
|
+ if (res.errcode == '0') {
|
|
|
+ uni.showModal({
|
|
|
+ content: "报名成功!",
|
|
|
+ showCancel: false
|
|
|
+ });
|
|
|
+ uni.navigateBack({
|
|
|
+ delta: 1
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: res.errmsg,
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .main {
|
|
|
+ background-color: var(--footColor);
|
|
|
+
|
|
|
+ .one {
|
|
|
+ margin: 0 0 3vw 0;
|
|
|
+ padding: 0 2vw;
|
|
|
+ background-color: var(--mainColor);
|
|
|
+
|
|
|
+ .one_1 {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 3vw 0;
|
|
|
+ border-bottom: 1px solid var(--f5Color);
|
|
|
+ font-size: var(--font14Size);
|
|
|
+
|
|
|
+ span {
|
|
|
+ margin: 0 0 0 1vw;
|
|
|
+ }
|
|
|
+
|
|
|
+ .t-icon {
|
|
|
+ width: var(--font15Size) !important;
|
|
|
+ height: var(--font15Size) !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .one_2 {
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .one_left {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .one_right {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: var(--mainColor);
|
|
|
+ padding: 1vw;
|
|
|
+
|
|
|
+ .t-icon {
|
|
|
+ color: var(--mainColor) !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .active_1 {
|
|
|
+ background-color: #4caf50;
|
|
|
+ }
|
|
|
+
|
|
|
+ .active_2 {
|
|
|
+ background-color: #2196f3;
|
|
|
+ }
|
|
|
+
|
|
|
+ .active_3 {
|
|
|
+ background-color: #FF5722;
|
|
|
+ }
|
|
|
+
|
|
|
+ .active_4 {
|
|
|
+ background-color: #949698;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .name {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: var(--font16Size);
|
|
|
+ }
|
|
|
+
|
|
|
+ .text_color {
|
|
|
+ color: var(--f69Color);
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .two {
|
|
|
+ padding: 2vw 0;
|
|
|
+ background-color: var(--mainColor);
|
|
|
+
|
|
|
+ .two_1 {
|
|
|
+ .two_text {
|
|
|
+ text-indent: 10px;
|
|
|
+ border-left: 3px solid var(--f3CColor);
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: var(--font16Size);
|
|
|
+ }
|
|
|
+
|
|
|
+ .two_remark {
|
|
|
+ margin: 2vw 0 0 0;
|
|
|
+ text-indent: 10px;
|
|
|
+ color: var(--fF0Color);
|
|
|
+ font-size: var(--font12Size);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .two_2 {
|
|
|
+ padding: 2vw;
|
|
|
+
|
|
|
+ .other {
|
|
|
+ padding: 4vw 2vw;
|
|
|
+ border-bottom: 1px solid var(--footColor);
|
|
|
+ }
|
|
|
+
|
|
|
+ .value {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ background-color: var(--mainColor);
|
|
|
+
|
|
|
+ .label {
|
|
|
+ text-align: right;
|
|
|
+
|
|
|
+ /deep/.uni-data-checklist .checklist-group .checklist-box {
|
|
|
+ margin-right: 0 !important;
|
|
|
+ margin-left: 25px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .error-message {
|
|
|
+ text-align: right;
|
|
|
+ margin: 5px 0 0 0;
|
|
|
+ color: var(--fF0Color);
|
|
|
+ font-size: var(--font12Size);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .button {
|
|
|
+ margin: 2vw 0 0 0;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ button {
|
|
|
+ background-color: var(--f3CColor);
|
|
|
+ border-radius: 2vw;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|