Skip to content

A
alumni-show-h5
提交 a7ff9b31 authored 作者: 王鹏飞's avatar 王鹏飞
浏览文件
操作

chore: 组织创建和组织详情页字段调整

上级 55680f4f
显示空白字符变更
内嵌 并排
正在显示 包含 140 行增加 和 17 行删除
src/assets/css/base.css
浏览文件 @ a7ff9b31
......@@ -176,12 +176,15 @@ body {
.form .van-field__label {
margin-bottom: 10px;
}
.form .van-field__right-icon {
position: absolute;
right: 10px;
}
.form .van-field--error .van-field__control,
.form .van-field--error .van-field__control::placeholder {
color: #999;
-webkit-text-fill-color: currentColor;
}
.line-clamp {
display: -webkit-box;
-webkit-line-clamp: 2;
......
src/components/Form.vue
浏览文件 @ a7ff9b31
......@@ -14,11 +14,13 @@
<van-field
readonly
clickable
right-icon="arrow-down"
:border="false"
:required="false"
v-bind="item"
v-model="ruleForm[item.name]"
@click="showPicker(item)"
v-if="item.isShow ? item.isShow(ruleForm) : true"
>
<template #label>
{{ item.label }}
......@@ -26,16 +28,39 @@
</template>
</van-field>
</template>
<!-- 地区 -->
<template v-else-if="item.fieldType === 'area'">
<van-field
readonly
clickable
right-icon="arrow-down"
:border="false"
:required="false"
v-bind="item"
v-model="ruleForm[item.name]"
@click="showPicker(item)"
v-if="item.isShow ? item.isShow(ruleForm) : true"
>
<template #label>
{{ item.label }}
<span class="red" v-if="item.required">*</span>
</template>
</van-field>
</template>
<!-- 选择 -->
<template v-else-if="item.fieldType === 'select'">
<van-field
readonly
clickable
right-icon="arrow-down"
:border="false"
:required="false"
:value="ruleForm[item.name] | pickerValueText(item)"
v-bind="item"
@click="showPicker(item)"
v-if="item.isShow ? item.isShow(ruleForm) : true"
>
<template #label>
{{ item.label }}
......@@ -43,13 +68,15 @@
</template>
</van-field>
</template>
<!-- 上传图片 -->
<template v-else-if="item.fieldType === 'uploader'">
<van-field
:border="false"
:required="false"
v-bind="item"
v-model="ruleForm[item.name]"
v-else-if="item.fieldType === 'uploader'"
v-if="item.isShow ? item.isShow(ruleForm) : true"
>
<template #label>
{{ item.label }}
......@@ -59,13 +86,16 @@
<upload v-model="ruleForm[item.name]" :max-count="1" />
</template>
</van-field>
</template>
<!-- 单选 -->
<template v-else-if="item.fieldType === 'radio'">
<van-field
:border="false"
:required="false"
v-bind="item"
v-model="ruleForm[item.name]"
v-else-if="item.fieldType === 'radio'"
v-if="item.isShow ? item.isShow(ruleForm) : true"
>
<template #label>
{{ item.label }}
......@@ -85,19 +115,23 @@
</van-radio-group>
</template>
</van-field>
</template>
<!-- 文本框 -->
<template v-else>
<van-field
:border="false"
:required="false"
v-bind="item"
v-model="ruleForm[item.name]"
v-else
v-if="item.isShow ? item.isShow(ruleForm) : true"
>
<template #label>
{{ item.label }}
<span class="red" v-if="item.required">*</span>
</template>
</van-field>
</template>
<van-popup v-model="picker.visible" position="bottom">
<van-datetime-picker
......@@ -116,6 +150,13 @@
@cancel="picker.visible = false"
v-if="picker.fieldType === 'select'"
/>
<van-area
:area-list="areaList"
:columns-num="2"
@confirm="onAreaPickerConfirm"
@cancel="picker.visible = false"
v-if="picker.fieldType === 'area'"
/>
</van-popup>
</div>
</template>
......@@ -126,6 +167,7 @@
<script>
import dayjs from 'dayjs'
import Upload from '@/components/Upload'
import areaList from '@/utils/area.js'
export default {
name: 'VForm',
......@@ -168,7 +210,8 @@ export default {
remote: null
},
minDate: new Date(),
pickerActive: {}
pickerActive: {},
areaList
}
},
filters: {
......@@ -202,6 +245,7 @@ export default {
this.getPickerOptions(field)
}
},
// 选择确定
onPickerConfirm(data) {
this.ruleForm[this.picker.name] = data[this.picker.valueKey]
this.picker.visible = false
......@@ -209,12 +253,18 @@ export default {
this.pickerActive = data
}
},
// 时间选择确定
onTimePickerConfirm(time) {
this.ruleForm[this.picker.name] = dayjs(time)
.second(0)
.format('YYYY-MM-DD HH:mm:ss')
this.picker.visible = false
},
// 地区选择确定
onAreaPickerConfirm(values) {
this.ruleForm[this.picker.name] = values.map(item => item.name).join('-')
this.picker.visible = false
},
submit() {
return this.$refs.form.submit()
},
......
src/main.js
浏览文件 @ a7ff9b31
......@@ -6,7 +6,8 @@ import router from './router'
// vue-meta
import VueMeta from 'vue-meta'
Vue.use(VueMeta)
import { Icon } from 'vant'
Vue.use(Icon)
// vant
import { Notify } from 'vant'
Vue.use(Notify)
......
src/utils/area.js 0 → 100644
浏览文件 @ a7ff9b31
This source diff could not be displayed because it is too large. You can view the blob instead.
src/views/create/Group.vue
浏览文件 @ a7ff9b31
<template>
<card title="创建新组织" style="margin:0 20px;">
<v-form ref="form" :fields="fields" @submit="onSubmit">
<v-form ref="form" :model="formModel" :fields="fields" @submit="onSubmit">
<input
type="button"
value="确认创建，提交审核"
......@@ -21,6 +21,7 @@ export default {
components: { Card, VForm },
data() {
return {
formModel: {},
fields: [
{
fieldType: 'select',
......@@ -41,7 +42,31 @@ export default {
label: '名称',
required: true,
placeholder: '请输入组织名称',
rules: [{ required: true, message: '请输入组织名称' }]
rules: [{ required: true, message: '请输入组织名称' }],
isShow(data) {
return ['2', '3'].includes(data.org_type)
}
},
{
fieldType: 'area',
name: 'area',
label: '城市',
required: true,
placeholder: '选择组织所在城市',
rules: [{ required: true, message: '选择组织所在城市' }],
isShow(data) {
return ['1', '3'].includes(data.org_type)
}
},
{
name: 'industry',
label: '行业',
required: true,
placeholder: '请输入组织所在行业',
rules: [{ required: true, message: '请输入组织所在行业' }],
isShow(data) {
return data.org_type === '2'
}
},
{
name: 'purpose',
......@@ -66,13 +91,6 @@ export default {
placeholder: '请输入组织发起人',
rules: [{ required: true, message: '请输入组织发起人' }]
},
{
name: 'org_city',
label: '城市',
required: true,
placeholder: '请输入组织所在城市',
rules: [{ required: true, message: '请输入组织所在城市' }]
},
{
type: 'textarea',
name: 'rules',
......@@ -101,17 +119,36 @@ export default {
]
}
},
watch: {
$route: {
immediate: true,
deep: true,
handler(route) {
this.formModel = Object.assign(this.formModel, route.query)
}
}
},
methods: {
handleSubmit() {
this.$refs.form.submit()
},
onSubmit(data) {
const ruleForm = this.$refs.form.ruleForm
data.org_type = ruleForm.org_type
// 头像
if (data.logo) {
const [first = { url: '' }] = data.logo
data.logo = first.url
}
data.org_type = ruleForm.org_type || 1
// 城市
if (data.area) {
const [province, city] = data.area.split('-')
data.org_province = province
data.org_city = city
}
if (data.org_type === '1') {
data.org_name = `${data.org_city}校友会`
}
api.addGroup(data).then(response => {
if (response.success) {
this.$dialog
......
src/views/group/Item.vue
浏览文件 @ a7ff9b31
......@@ -5,7 +5,8 @@
<h6 class="leave-group" v-if="detail.button_show === 3">退出组织</h6>
</template> -->
<div class="info">
<div class="info-item" v-for="item in fields" :key="item.name">
<template v-for="item in fields">
<div class="info-item" :key="item.name" v-if="detail[item.name]">
<div class="info-item__label">{{ item.label }}</div>
<div class="info-item__content">
<template v-if="item.computed">
......@@ -16,6 +17,27 @@
</template>
</div>
</div>
</template>
</div>
<!-- 自己创建的组织 -->
<div class="buttons" v-if="detail.is_mine">
<input
type="button"
class="button button-info"
value="查看更多活动"
@click="$router.push({ name: 'groupActivity', params: { id: pid } })"
/>
<input
type="button"
class="button button-primary"
value="创建活动"
@click="
$router.push({
name: 'createGroup',
query: { org_type: detail.org_type }
})
"
/>
</div>
<div class="buttons">
<input
......@@ -49,7 +71,9 @@ export default {
fields: [
{ name: 'org_name', label: '名称' },
{ name: 'org_type_str', label: '类型' },
{ name: 'org_province', label: '省份' },
{ name: 'org_city', label: '城市' },
{ name: 'industry', label: '行业' },
{ name: 'purpose', label: '宗旨' },
{ name: 'goal', label: '目的' },
{ name: 'initiator', label: '主要发起人' },
......@@ -136,6 +160,7 @@ export default {
color: #fff;
text-align: center;
border-radius: 20px;
margin: 0 10px;
}
.button-default {
background: #ccc;
......@@ -147,6 +172,13 @@ export default {
rgba(18, 186, 244, 1) 100%
);
}
.button-info {
background: linear-gradient(
180deg,
rgba(255, 201, 44, 1) 0%,
rgba(255, 116, 42, 1) 100%
);
}
::v-deep .group-avatar {
width: 100px;
height: 100px;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论