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

src/assets/css/base.css

@@ -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

@@ -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,61 +68,70 @@
             </template>
           </van-field>
         </template>
+
         <!-- 上传图片 -->
-        <van-field
-          :border="false"
-          :required="false"
-          v-bind="item"
-          v-model="ruleForm[item.name]"
-          v-else-if="item.fieldType === 'uploader'"
-        >
-          <template #label>
-            {{ item.label }}
-            <span class="red" v-if="item.required">*</span>
-          </template>
-          <template #input>
-            <upload v-model="ruleForm[item.name]" :max-count="1" />
-          </template>
-        </van-field>
+        <template v-else-if="item.fieldType === 'uploader'">
+          <van-field
+            :border="false"
+            :required="false"
+            v-bind="item"
+            v-model="ruleForm[item.name]"
+            v-if="item.isShow ? item.isShow(ruleForm) : true"
+          >
+            <template #label>
+              {{ item.label }}
+              <span class="red" v-if="item.required">*</span>
+            </template>
+            <template #input>
+              <upload v-model="ruleForm[item.name]" :max-count="1" />
+            </template>
+          </van-field>
+        </template>
+
         <!-- 单选 -->
-        <van-field
-          :border="false"
-          :required="false"
-          v-bind="item"
-          v-model="ruleForm[item.name]"
-          v-else-if="item.fieldType === 'radio'"
-        >
-          <template #label>
-            {{ item.label }}
-            <span class="red" v-if="item.required">*</span>
-          </template>
-          <template #input>
-            <van-radio-group
-              v-model="ruleForm[item.name]"
-              direction="horizontal"
-            >
-              <van-radio
-                :name="item.name"
-                v-for="item in item.values"
-                :key="item.name"
-                >{{ item.text }}</van-radio
+        <template v-else-if="item.fieldType === 'radio'">
+          <van-field
+            :border="false"
+            :required="false"
+            v-bind="item"
+            v-model="ruleForm[item.name]"
+            v-if="item.isShow ? item.isShow(ruleForm) : true"
+          >
+            <template #label>
+              {{ item.label }}
+              <span class="red" v-if="item.required">*</span>
+            </template>
+            <template #input>
+              <van-radio-group
+                v-model="ruleForm[item.name]"
+                direction="horizontal"
               >
-            </van-radio-group>
-          </template>
-        </van-field>
+                <van-radio
+                  :name="item.name"
+                  v-for="item in item.values"
+                  :key="item.name"
+                  >{{ item.text }}</van-radio
+                >
+              </van-radio-group>
+            </template>
+          </van-field>
+        </template>
+
         <!-- 文本框 -->
-        <van-field
-          :border="false"
-          :required="false"
-          v-bind="item"
-          v-model="ruleForm[item.name]"
-          v-else
-        >
-          <template #label>
-            {{ item.label }}
-            <span class="red" v-if="item.required">*</span>
-          </template>
-        </van-field>
+        <template v-else>
+          <van-field
+            :border="false"
+            :required="false"
+            v-bind="item"
+            v-model="ruleForm[item.name]"
+            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

@@ -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/views/create/Group.vue

 <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

@@ -5,17 +5,39 @@
         <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">
-          <div class="info-item__label">{{ item.label }}</div>
-          <div class="info-item__content">
-            <template v-if="item.computed">
-              <div v-html="item.computed(detail[item.name], detail)"></div>
-            </template>
-            <template v-else>
-              {{ detail[item.name] }}
-            </template>
+        <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">
+                <div v-html="item.computed(detail[item.name], detail)"></div>
+              </template>
+              <template v-else>
+                {{ detail[item.name] }}
+              </template>
+            </div>
           </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;