|
|
@@ -16,6 +16,17 @@
|
|
|
<!-- 表单 -->
|
|
|
<view class="example">
|
|
|
<uni-forms style="padding: 0 20rpx 0 20rpx" label-position="top" ref="valiForm" :rules="rules" :modelValue="valiFormData">
|
|
|
+ <uni-forms-item v-if="shouldShowCrSelector" label="服务区域" label-width="100px" required>
|
|
|
+ <view v-if="isDistrictEntry" class="service-area-trigger" @click="openServiceAreaPicker">
|
|
|
+ <text :class="selectedServiceAreaTitle ? 'service-area-value' : 'service-area-placeholder'">
|
|
|
+ {{ selectedServiceAreaTitle || `请选择服务区域` }}
|
|
|
+ </text>
|
|
|
+ <uni-icons type="bottom" size="16" color="#6a412c"></uni-icons>
|
|
|
+ </view>
|
|
|
+ <view v-else class="service-area-readonly">
|
|
|
+ {{ selectedServiceAreaTitle || '暂无文物信息' }}
|
|
|
+ </view>
|
|
|
+ </uni-forms-item>
|
|
|
<uni-forms-item label="您的姓名" label-width="80px" required name="name">
|
|
|
<uni-easyinput v-model="valiFormData.name" placeholder="请输入姓名" />
|
|
|
</uni-forms-item>
|
|
|
@@ -78,6 +89,17 @@
|
|
|
<view class="bm_tit">报名</view>
|
|
|
</view>
|
|
|
|
|
|
+ <u-picker
|
|
|
+ keyName="title"
|
|
|
+ :show="showServiceAreaPicker"
|
|
|
+ :columns="serviceAreaColumns"
|
|
|
+ :defaultIndex="serviceAreaDefaultIndex"
|
|
|
+ @cancel="showServiceAreaPicker = false"
|
|
|
+ @close="closeServiceAreaPicker"
|
|
|
+ :closeOnClickOverlay="true"
|
|
|
+ @confirm="confirmServiceArea"
|
|
|
+ ></u-picker>
|
|
|
+
|
|
|
|
|
|
<!-- 对话框 -->
|
|
|
<uni-popup ref="popup" type="center">
|
|
|
@@ -103,8 +125,12 @@ export default {
|
|
|
return {
|
|
|
regionList: [],
|
|
|
region_id: null,
|
|
|
+ entryRegionId: '',
|
|
|
pendingRegionId: '',
|
|
|
pendingRegionName: '',
|
|
|
+ volunteerCrInfo: {},
|
|
|
+ showServiceAreaPicker: false,
|
|
|
+ selectedServiceAreaTitle: '',
|
|
|
cr_id: '' /* 文物id */,
|
|
|
modifyId: '' /* 修改资料的文物id */,
|
|
|
volunteer_id: '' /* 志愿者id */,
|
|
|
@@ -305,10 +331,13 @@ export default {
|
|
|
this.volunteer_id = o.volunteer_id;
|
|
|
this.modifyId = o.modifyId;
|
|
|
this.pendingRegionId = o.region_id ? decodeURIComponent(o.region_id) : '';
|
|
|
+ this.entryRegionId = this.pendingRegionId;
|
|
|
this.pendingRegionName = o.regionName ? decodeURIComponent(o.regionName) : '';
|
|
|
if (o.type && this.typeOptions.some((item) => item.value === o.type)) {
|
|
|
this.valiFormData.type = o.type;
|
|
|
}
|
|
|
+ this.initSelectedCrInfo();
|
|
|
+ this.fetchVolunteerCrInfo();
|
|
|
this.getCategoryCascadeList();
|
|
|
|
|
|
if (this.isLogin) {
|
|
|
@@ -325,7 +354,44 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
- ...mapGetters(['isLogin'])
|
|
|
+ ...mapGetters(['isLogin']),
|
|
|
+ isDistrictEntry() {
|
|
|
+ return !!this.entryRegionId;
|
|
|
+ },
|
|
|
+ isVolunteerType() {
|
|
|
+ return this.valiFormData.type === 'volunteer';
|
|
|
+ },
|
|
|
+ serviceAreaOptions() {
|
|
|
+ const serviceAreas = this.volunteerCrInfo && Array.isArray(this.volunteerCrInfo.service_areas)
|
|
|
+ ? this.volunteerCrInfo.service_areas
|
|
|
+ : [];
|
|
|
+ const optionMap = {};
|
|
|
+ const optionList = [];
|
|
|
+ serviceAreas.forEach((item, index) => {
|
|
|
+ const optionId = item && item.id !== undefined && item.id !== null ? item.id : '';
|
|
|
+ const optionTitle = item && item.title ? item.title : '';
|
|
|
+ const optionKey = `${optionId}_${optionTitle}`;
|
|
|
+ if (!optionMap[optionKey]) {
|
|
|
+ const optionItem = {
|
|
|
+ ...item,
|
|
|
+ optionKey: `service_area_${index}`
|
|
|
+ };
|
|
|
+ optionMap[optionKey] = optionItem;
|
|
|
+ optionList.push(optionItem);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return optionList;
|
|
|
+ },
|
|
|
+ serviceAreaColumns() {
|
|
|
+ return [this.serviceAreaOptions];
|
|
|
+ },
|
|
|
+ serviceAreaDefaultIndex() {
|
|
|
+ const matchedIndex = this.serviceAreaOptions.findIndex((item) => String(item.id) === String(this.cr_id));
|
|
|
+ return [matchedIndex >= 0 ? matchedIndex : 0];
|
|
|
+ },
|
|
|
+ shouldShowCrSelector() {
|
|
|
+ return this.isDistrictEntry || (!this.isDistrictEntry && !!this.cr_id);
|
|
|
+ }
|
|
|
},
|
|
|
methods: {
|
|
|
onchange(e) {
|
|
|
@@ -335,6 +401,40 @@ export default {
|
|
|
this.region_id = node.value;
|
|
|
console.log(node);
|
|
|
},
|
|
|
+ openServiceAreaPicker() {
|
|
|
+ if (!this.serviceAreaOptions.length) {
|
|
|
+ this.$common.errorToShow('暂无可选文物');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.showServiceAreaPicker = true;
|
|
|
+ },
|
|
|
+ closeServiceAreaPicker() {
|
|
|
+ this.showServiceAreaPicker = false;
|
|
|
+ },
|
|
|
+ confirmServiceArea(e) {
|
|
|
+ const selectedItem = e && Array.isArray(e.value) ? e.value[0] : null;
|
|
|
+ this.showServiceAreaPicker = false;
|
|
|
+ if (!selectedItem) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.cr_id = selectedItem.id !== undefined && selectedItem.id !== null ? selectedItem.id : '';
|
|
|
+ this.selectedServiceAreaTitle = selectedItem.title || '';
|
|
|
+ },
|
|
|
+ initSelectedCrInfo() {
|
|
|
+ if (this.isDistrictEntry || !this.cr_id) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.$api.getContentDetail(
|
|
|
+ {
|
|
|
+ main_body_id: 1,
|
|
|
+ id: this.cr_id
|
|
|
+ },
|
|
|
+ (res) => {
|
|
|
+ const detail = res && res.data ? res.data : {};
|
|
|
+ this.selectedServiceAreaTitle = detail.title || detail.name || '';
|
|
|
+ }
|
|
|
+ );
|
|
|
+ },
|
|
|
getRegionValue(item = {}) {
|
|
|
if (item.value !== undefined && item.value !== null && item.value !== '') {
|
|
|
return item.value;
|
|
|
@@ -392,6 +492,36 @@ export default {
|
|
|
this.region_id = this.getRegionValue(matchedRegion);
|
|
|
}
|
|
|
},
|
|
|
+ getVolunteerCrInfoParams() {
|
|
|
+ if (!this.entryRegionId || !this.valiFormData.type) {
|
|
|
+ return null;
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ main_body_id: 1,
|
|
|
+ id: this.entryRegionId,
|
|
|
+ type: this.valiFormData.type
|
|
|
+ };
|
|
|
+ },
|
|
|
+ fetchVolunteerCrInfo() {
|
|
|
+ const params = this.getVolunteerCrInfoParams();
|
|
|
+ if (!params) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.$api.getVolunteerCrInfo(params, (res) => {
|
|
|
+ this.volunteerCrInfo = res && res.data ? res.data : {};
|
|
|
+ const matchedItem = this.serviceAreaOptions.find((item) => String(item.id) === String(this.cr_id));
|
|
|
+ if (matchedItem) {
|
|
|
+ this.selectedServiceAreaTitle = matchedItem.title || '';
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ validateSelectedCr() {
|
|
|
+ if (!this.cr_id) {
|
|
|
+ this.$common.errorToShow(`请选择${this.volunteerCrLabel}`);
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ return true;
|
|
|
+ },
|
|
|
// 区域
|
|
|
getCategoryCascadeList() {
|
|
|
this.$api.getCategoryCascadeList({ main_body_id: 1, pid: 5, level: 2 }, function (res) {
|
|
|
@@ -448,6 +578,9 @@ export default {
|
|
|
that.$common.errorToShow('缺少报名类型，请从对应入口重新进入');
|
|
|
return;
|
|
|
}
|
|
|
+ if (!this.validateSelectedCr()) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
if (!err) {
|
|
|
console.log('校验成功');
|
|
|
/* 检验成功 */
|
|
|
@@ -474,6 +607,9 @@ export default {
|
|
|
if (this.cr_id) {
|
|
|
params.cr_id = this.cr_id;
|
|
|
}
|
|
|
+ if (this.isDistrictEntry && this.selectedServiceAreaTitle) {
|
|
|
+ params.service_area = this.selectedServiceAreaTitle;
|
|
|
+ }
|
|
|
this.$api.scanApplyVolunteer(
|
|
|
params,
|
|
|
function (res) {
|
|
|
@@ -706,6 +842,41 @@ export default {
|
|
|
color: #333;
|
|
|
}
|
|
|
|
|
|
+.service-area-readonly {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ height: 70rpx;
|
|
|
+ padding: 0 20rpx;
|
|
|
+ background-color: #f7dfc0;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ color: #6a412c;
|
|
|
+ font-size: 28rpx;
|
|
|
+ line-height: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.service-area-trigger {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ box-sizing: border-box;
|
|
|
+ height: 70rpx;
|
|
|
+ padding: 0 20rpx;
|
|
|
+ background-color: #f7dfc0;
|
|
|
+ border-radius: 8rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.service-area-placeholder {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.service-area-value {
|
|
|
+ font-size: 24rpx;
|
|
|
+ line-height: 1;
|
|
|
+}
|
|
|
+
|
|
|
/* 本人承诺样式 */
|
|
|
.commitment-text {
|
|
|
font-size: 28rpx;
|
