1122 lines
30 KiB
Vue
1122 lines
30 KiB
Vue
<template>
|
||
<view class="service-area-page">
|
||
<!-- 顶部导航栏 -->
|
||
<custom-navbar :title="navTitle" :showBack="true"></custom-navbar>
|
||
|
||
<!-- 页面内容容器 -->
|
||
<view class="page-content" :style="{ paddingBottom: buttonAreaHeight + 'px' }">
|
||
<!-- 服务区域选择区域 -->
|
||
<view class="area-container box-cont">
|
||
<view class="area-header">
|
||
<view class="title-bar"></view>
|
||
<text class="area-title">服务区域</text>
|
||
</view>
|
||
|
||
|
||
|
||
<!-- 显示当前生效的服务区域 -->
|
||
<view class="current-area" v-if="!showPendingArea">
|
||
<view class="area-display">
|
||
<text class="area-value">{{ currentAreasText || '暂未设置服务区域' }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 显示待审核的服务区域 -->
|
||
<view class="pending-area" v-else>
|
||
<!-- 只有在编辑模式下才显示"请选择服务区域"提示 -->
|
||
<view class="area-selection" @click="editable ? showRegionPopup() : null">
|
||
<text class="area-label" v-if="editable">请选择服务区域</text>
|
||
<view class="area-picker-trigger">
|
||
<text class="selected-area">{{ selectedAreasText || '请选择' }}</text>
|
||
<image class="arrow-down" v-if="editable" src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/dccc4513-377c-4bfa-9fd2-a5cfdb9798f3" mode="aspectFit"></image>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 区域限制提示，只在编辑模式下显示 -->
|
||
<view class="area-limit-tip" v-if="editable">
|
||
<text class="limit-text">* 可以更换区域，但不能跨城市</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 服务区域选择弹出框 -->
|
||
<view class="popup" :class="{ show: showRegionPopupFlag }">
|
||
<view class="popup-mask" @click="hideRegionPopup"></view>
|
||
<view class="popup-content region-popup">
|
||
<view class="popup-header">
|
||
<text class="popup-title">选择服务区域</text>
|
||
<text class="popup-close" @click="hideRegionPopup">×</text>
|
||
</view>
|
||
<view class="region-tabs">
|
||
<view
|
||
v-for="(tab, index) in regionTabs"
|
||
:key="index"
|
||
class="region-tab"
|
||
:class="{ active: currentTab === index }"
|
||
@click="switchTab(index)"
|
||
>
|
||
{{tab}}
|
||
</view>
|
||
</view>
|
||
<view class="region-body">
|
||
<scroll-view
|
||
scroll-y
|
||
class="region-scroll"
|
||
v-if="currentTab === 0"
|
||
>
|
||
<view
|
||
class="region-item"
|
||
v-for="(province, index) in ChinaCitys"
|
||
:key="index"
|
||
@click="selectProvince(province,index)"
|
||
>
|
||
<text>{{province.province}}</text>
|
||
<image class="arrow-right" src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/dccc4513-377c-4bfa-9fd2-a5cfdb9798f3" mode="aspectFit"></image>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<scroll-view
|
||
scroll-y
|
||
class="region-scroll"
|
||
v-if="currentTab === 1"
|
||
>
|
||
<view
|
||
class="region-item"
|
||
v-for="(city, index) in cityList"
|
||
:key="index"
|
||
@click="selectCity(city,index)"
|
||
>
|
||
<text>{{city.city}}</text>
|
||
<image class="arrow-right" src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/dccc4513-377c-4bfa-9fd2-a5cfdb9798f3" mode="aspectFit"></image>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<scroll-view
|
||
scroll-y
|
||
class="region-scroll"
|
||
v-if="currentTab === 2"
|
||
>
|
||
<view
|
||
class="region-item checkbox-item"
|
||
v-for="(district, index) in districtList"
|
||
:key="index"
|
||
@click="toggleDistrictSelect(index)"
|
||
>
|
||
<view class="checkbox" :class="{ checked: district.checked }">
|
||
<image v-if="district.checked" class="check-icon" src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/66325904-4603-48fd-b03b-90c684af96e9" mode="aspectFit"></image>
|
||
</view>
|
||
<text class="checkbox-label">{{district.area}}</text>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
<view class="popup-footer">
|
||
<view class="popup-btn cancel" @click="hideRegionPopup">
|
||
<text class="btn-text">取消</text>
|
||
</view>
|
||
<view class="popup-btn confirm" @click="confirmRegionSelect">
|
||
<text class="btn-text">确定</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 底部按钮 -->
|
||
<view class="bottom-actions" ref="buttonArea">
|
||
<!-- 驳回原因提示 -->
|
||
<view class="reject-reason" v-if="shouldShowRejectReason">
|
||
<view class="reject-title">您的提交已驳回</view>
|
||
<view class="reject-detail">驳回原因：{{ backText }}</view>
|
||
</view>
|
||
<!-- 审核中提示 -->
|
||
<view class="audit-tip" v-if="showAuditTip && !showPendingArea">
|
||
<text class="audit-text">您的提交变更正在审核中...</text>
|
||
</view>
|
||
|
||
<!-- 去变更信息按钮 -->
|
||
<view class="action-btn change-info-btn" v-if="buttonType === 'change'" @click="startChange">
|
||
<text class="btn-text">去变更信息</text>
|
||
</view>
|
||
|
||
<!-- 取消和提交按钮 -->
|
||
<view class="action-buttons-row" v-if="buttonType === 'edit'">
|
||
<view class="action-btn cancel-btn" @click="cancelChange">
|
||
<text class="btn-text cancel-text">取消</text>
|
||
</view>
|
||
<view class="action-btn submit-btn" @click="submitChange">
|
||
<text class="btn-text">提交</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 查看我的变更按钮 -->
|
||
<view class="action-btn view-change-btn" v-if="buttonType === 'view'" @click="togglePendingArea">
|
||
<text class="btn-text">{{ showPendingArea ? '返回' : '查看我的变更' }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import request from '@/utils/request.js';
|
||
import ChinaCitys from '@/static/data/ChinaCitys.json';
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
currentAreas: [], // 当前服务区域数组
|
||
selectedAreas: [], // 选中的服务区域数组（待审核的）
|
||
originalAreas: [], // 原始服务区域数组（当前生效的）
|
||
editable: false, // 是否可编辑
|
||
buttonType: 'change', // 按钮类型: change-去变更信息, edit-取消/提交, view-查看我的变更
|
||
showAuditTip: false, // 是否显示审核中提示
|
||
auditStatus: null, // 审核状态
|
||
applyId: null, // 申请ID
|
||
isLoading: true, // 加载状态
|
||
showPendingArea: false, // 是否显示待审核的区域
|
||
navTitle: '服务区域', // 导航栏标题
|
||
buttonAreaHeight: 120, // 按钮区域高度
|
||
backText: '', // 驳回原因
|
||
|
||
// 区域选择器相关数据
|
||
showRegionPopupFlag: false,
|
||
currentTab: 0,
|
||
regionTabs: ['省', '市', '区'],
|
||
ChinaCitys: [],
|
||
cityList: [],
|
||
districtList: [],
|
||
selectedProvince: null,
|
||
selectedCity: null,
|
||
|
||
// 原始城市信息（用于限制不能跨城市）
|
||
originalCity: '',
|
||
|
||
// 当前选择的城市信息
|
||
currentSelectedCity: '',
|
||
|
||
// 数据加载完成标记
|
||
dataLoaded: false,
|
||
|
||
preventStatusOverride: false, // 防止状态被覆盖
|
||
}
|
||
},
|
||
computed: {
|
||
// 当前区域显示文本
|
||
currentAreasText() {
|
||
return this.currentAreas.join('、');
|
||
},
|
||
// 选中区域显示文本
|
||
selectedAreasText() {
|
||
return this.selectedAreas.join('、');
|
||
},
|
||
// 检查是否有变更
|
||
hasChanges() {
|
||
const currentSorted = [...this.currentAreas].sort().join(',');
|
||
const selectedSorted = [...this.selectedAreas].sort().join(',');
|
||
return currentSorted !== selectedSorted;
|
||
},
|
||
// 控制驳回提示是否显示
|
||
shouldShowRejectReason() {
|
||
// 驳回状态下，只要不显示待审核区域，且有驳回原因，就显示
|
||
const shouldShow = this.auditStatus === 3 &&
|
||
!this.showPendingArea &&
|
||
this.backText &&
|
||
this.backText.trim().length > 0;
|
||
|
||
console.log('是否显示驳回原因:', {
|
||
shouldShow,
|
||
auditStatus: this.auditStatus,
|
||
showPendingArea: this.showPendingArea,
|
||
backText: this.backText
|
||
});
|
||
|
||
return shouldShow;
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.initPage();
|
||
},
|
||
onReady() {
|
||
this.getButtonAreaHeight();
|
||
},
|
||
methods: {
|
||
// 初始化页面
|
||
async initPage() {
|
||
this.isLoading = true;
|
||
try {
|
||
await this.initAreaData();
|
||
|
||
// 先加载当前生效的区域
|
||
await this.loadCurrentEffectiveAreas();
|
||
|
||
// 再加载申请详情
|
||
await this.loadApplyDetails();
|
||
|
||
// 最后更新页面状态
|
||
this.updatePageStatus();
|
||
|
||
} catch (error) {
|
||
console.error('初始化页面失败:', error);
|
||
} finally {
|
||
this.isLoading = false;
|
||
}
|
||
},
|
||
|
||
// 初始化地区数据
|
||
initAreaData() {
|
||
return new Promise((resolve) => {
|
||
if (ChinaCitys && ChinaCitys.length > 0) {
|
||
this.ChinaCitys = ChinaCitys;
|
||
}
|
||
resolve();
|
||
});
|
||
},
|
||
|
||
// 获取按钮区域高度
|
||
getButtonAreaHeight() {
|
||
setTimeout(() => {
|
||
const query = uni.createSelectorQuery().in(this);
|
||
query.select('.bottom-actions').boundingClientRect(data => {
|
||
if (data) {
|
||
this.buttonAreaHeight = data.height + 20;
|
||
}
|
||
}).exec();
|
||
}, 100);
|
||
},
|
||
|
||
// 更新导航栏标题
|
||
updateNavTitle() {
|
||
if (this.editable || this.showPendingArea) {
|
||
this.navTitle = '服务区域变更';
|
||
} else {
|
||
this.navTitle = '服务区域';
|
||
}
|
||
},
|
||
|
||
// 加载申请详情
|
||
async loadApplyDetails() {
|
||
try {
|
||
console.log('开始加载申请详情...');
|
||
const res = await request.post('/syr/userSyrAuth/details', {
|
||
apply_type: 3 // 服务区域变更
|
||
});
|
||
|
||
console.log('完整的申请详情返回:', JSON.stringify(res, null, 2));
|
||
|
||
if (res.code === 200 && res.data) {
|
||
const detail = res.data;
|
||
this.applyId = detail.id;
|
||
this.auditStatus = detail.apply_state;
|
||
this.backText = detail.back_text || '';
|
||
|
||
console.log('审核状态:', this.auditStatus);
|
||
console.log('servers_region字段:', detail.servers_region);
|
||
console.log('servers_region类型:', typeof detail.servers_region);
|
||
console.log('servers_region长度:', detail.servers_region?.length);
|
||
|
||
// 处理服务区域数据
|
||
if (detail.servers_region && detail.servers_region.length > 0) {
|
||
console.log('申请详情中的服务区域:', detail.servers_region);
|
||
if (this.auditStatus === 1) { // 审核中
|
||
this.selectedAreas = [...detail.servers_region];
|
||
console.log('审核中，待审核区域:', this.selectedAreas);
|
||
} else if (this.auditStatus === 3) { // 审核驳回
|
||
this.selectedAreas = [...detail.servers_region];
|
||
console.log('审核驳回，被驳回区域:', this.selectedAreas);
|
||
}
|
||
} else {
|
||
console.log('接口返回的服务区域为空');
|
||
// 检查是否有其他字段包含服务区域数据
|
||
if (detail.service_area) {
|
||
console.log('从service_area字段获取数据:', detail.service_area);
|
||
const areas = Array.isArray(detail.service_area) ? detail.service_area : [detail.service_area];
|
||
if (this.auditStatus === 1 || this.auditStatus === 3) {
|
||
this.selectedAreas = areas;
|
||
}
|
||
} else {
|
||
console.log('所有服务区域字段都为空');
|
||
// 如果审核中状态但没有待审核区域数据，可能是数据异常
|
||
if (this.auditStatus === 1) {
|
||
console.warn('审核中状态但无待审核区域数据，这可能是数据异常');
|
||
}
|
||
}
|
||
}
|
||
|
||
// 加载当前生效的区域
|
||
await this.loadCurrentEffectiveAreas();
|
||
|
||
} else {
|
||
console.log('申请详情返回数据为空或code不为200:', res);
|
||
await this.loadCurrentEffectiveAreas();
|
||
}
|
||
|
||
} catch (error) {
|
||
console.error('加载申请详情失败:', error);
|
||
await this.loadCurrentEffectiveAreas();
|
||
}
|
||
},
|
||
|
||
// 加载当前生效的服务区域
|
||
async loadCurrentEffectiveAreas() {
|
||
try {
|
||
console.log('开始加载当前生效的服务区域...');
|
||
const res = await request.post('/user/getuser', {
|
||
type: 2 // 手艺人类型
|
||
});
|
||
|
||
if (res.state === 1 && res.data) {
|
||
// 检查服务区域字段
|
||
if (res.data.servers_region && res.data.servers_region.length > 0) {
|
||
this.currentAreas = [...res.data.servers_region];
|
||
this.originalAreas = [...res.data.servers_region];
|
||
} else if (res.data.service_area) {
|
||
// 兼容旧数据，如果是字符串格式
|
||
this.currentAreas = [res.data.service_area];
|
||
this.originalAreas = [res.data.service_area];
|
||
} else {
|
||
this.currentAreas = [];
|
||
this.originalAreas = [];
|
||
}
|
||
|
||
console.log('当前生效的区域:', this.currentAreas);
|
||
|
||
// 解析原始城市信息
|
||
this.parseOriginalCity();
|
||
|
||
// 只有在无申请状态或审核通过状态时，才用当前区域更新选中区域
|
||
if (this.auditStatus === null || this.auditStatus === 2) {
|
||
this.selectedAreas = [...this.currentAreas];
|
||
console.log('无申请或审核通过，同步选中区域:', this.selectedAreas);
|
||
} else {
|
||
console.log('审核中或审核驳回状态，保持选中区域不变:', this.selectedAreas);
|
||
}
|
||
|
||
this.updatePageStatus();
|
||
|
||
}
|
||
} catch (error) {
|
||
console.error('加载当前生效区域失败:', error);
|
||
this.currentAreas = [];
|
||
this.originalAreas = [];
|
||
if (this.auditStatus !== 1 && this.auditStatus !== 3) {
|
||
this.selectedAreas = [];
|
||
}
|
||
this.updatePageStatus();
|
||
}
|
||
},
|
||
|
||
// 解析原始城市信息
|
||
parseOriginalCity() {
|
||
if (this.currentAreas.length > 0) {
|
||
const firstArea = this.currentAreas[0];
|
||
const parts = firstArea.split('-');
|
||
if (parts.length >= 2) {
|
||
this.originalCity = parts[1]; // 格式：省-市-区，取第二部分就是市
|
||
console.log('原始城市:', this.originalCity);
|
||
}
|
||
}
|
||
},
|
||
|
||
// 根据审核状态更新页面状态
|
||
updatePageStatus() {
|
||
console.log('更新页面状态，审核状态:', this.auditStatus);
|
||
|
||
// 重置状态
|
||
this.showAuditTip = false;
|
||
this.showPendingArea = false;
|
||
this.editable = false;
|
||
|
||
// 根据审核状态设置页面
|
||
if (this.auditStatus === 1) { // 审核中
|
||
this.showAuditTip = true;
|
||
this.buttonType = 'view';
|
||
// 审核中时不默认显示待审核区域
|
||
this.showPendingArea = false;
|
||
|
||
} else if (this.auditStatus === 3) { // 审核驳回
|
||
this.showAuditTip = false;
|
||
this.buttonType = 'change';
|
||
// 驳回状态默认显示当前生效区域
|
||
this.showPendingArea = false;
|
||
|
||
console.log('驳回原因:', this.backText);
|
||
console.log('当前selectedAreas:', this.selectedAreas);
|
||
|
||
} else { // 无申请或审核通过
|
||
this.showAuditTip = false;
|
||
this.buttonType = 'change';
|
||
this.showPendingArea = false;
|
||
}
|
||
|
||
this.updateNavTitle();
|
||
|
||
console.log('最终页面状态:', {
|
||
showAuditTip: this.showAuditTip,
|
||
buttonType: this.buttonType,
|
||
editable: this.editable,
|
||
showPendingArea: this.showPendingArea,
|
||
auditStatus: this.auditStatus,
|
||
backText: this.backText
|
||
});
|
||
},
|
||
|
||
// 切换显示待审核的区域
|
||
togglePendingArea() {
|
||
this.preventStatusOverride = true;
|
||
this.showPendingArea = !this.showPendingArea;
|
||
|
||
console.log('切换待审核区域显示:', this.showPendingArea, '审核状态:', this.auditStatus);
|
||
console.log('当前selectedAreas:', this.selectedAreas);
|
||
console.log('当前selectedAreas长度:', this.selectedAreas.length);
|
||
|
||
if (this.showPendingArea && this.auditStatus === 1 && this.selectedAreas.length === 0) {
|
||
console.warn('审核中状态但选中区域为空，重新加载数据');
|
||
console.log('重新加载前的数据状态:', {
|
||
auditStatus: this.auditStatus,
|
||
selectedAreas: this.selectedAreas,
|
||
currentAreas: this.currentAreas
|
||
});
|
||
this.loadApplyDetails().finally(() => {
|
||
console.log('重新加载后的数据状态:', {
|
||
auditStatus: this.auditStatus,
|
||
selectedAreas: this.selectedAreas,
|
||
currentAreas: this.currentAreas
|
||
});
|
||
setTimeout(() => {
|
||
this.preventStatusOverride = false;
|
||
}, 100);
|
||
});
|
||
} else {
|
||
setTimeout(() => {
|
||
this.preventStatusOverride = false;
|
||
}, 100);
|
||
}
|
||
|
||
this.updateNavTitle();
|
||
},
|
||
|
||
// 开始变更
|
||
startChange() {
|
||
this.editable = true;
|
||
this.buttonType = 'edit';
|
||
this.showPendingArea = true;
|
||
this.updateNavTitle();
|
||
},
|
||
|
||
// 显示区域选择器
|
||
showRegionPopup() {
|
||
if (!this.editable) return;
|
||
|
||
// 重置选择器状态
|
||
this.currentTab = 0;
|
||
this.cityList = [];
|
||
this.districtList = [];
|
||
this.selectedProvince = null;
|
||
this.selectedCity = null;
|
||
this.currentSelectedCity = '';
|
||
|
||
this.showRegionPopupFlag = true;
|
||
},
|
||
|
||
// 隐藏区域选择器
|
||
hideRegionPopup() {
|
||
this.showRegionPopupFlag = false;
|
||
},
|
||
|
||
// 切换标签页
|
||
switchTab(index) {
|
||
if (index < this.currentTab) {
|
||
this.currentTab = index;
|
||
}
|
||
},
|
||
|
||
// 选择省份
|
||
selectProvince(province, index) {
|
||
this.selectedProvince = province.province;
|
||
this.currentTab = 1;
|
||
// 获取城市列表
|
||
this.cityList = this.ChinaCitys[index].citys || [];
|
||
// 重置当前选择的城市
|
||
this.currentSelectedCity = '';
|
||
},
|
||
|
||
// 选择城市
|
||
selectCity(city, index) {
|
||
// 检查是否已经有选中的城市
|
||
if (this.currentSelectedCity && city.city !== this.currentSelectedCity) {
|
||
// 如果切换城市，需要清空已选区域
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '切换城市将清空已选区域，是否继续？',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
// 清空已选区域
|
||
this.selectedAreas = [];
|
||
this.currentSelectedCity = city.city;
|
||
this.selectedCity = city.city;
|
||
this.currentTab = 2;
|
||
// 获取区县列表并初始化选中状态
|
||
this.districtList = (city.areas || []).map(item => ({
|
||
...item,
|
||
checked: false
|
||
}));
|
||
}
|
||
}
|
||
});
|
||
} else {
|
||
// 第一次选择城市或选择同一城市
|
||
this.currentSelectedCity = city.city;
|
||
this.selectedCity = city.city;
|
||
this.currentTab = 2;
|
||
// 获取区县列表并初始化选中状态
|
||
this.districtList = (city.areas || []).map(item => ({
|
||
...item,
|
||
checked: this.selectedAreas.includes(`${this.selectedProvince}-${this.selectedCity}-${item.area}`)
|
||
}));
|
||
}
|
||
},
|
||
|
||
// 切换区县选择状态
|
||
toggleDistrictSelect(index) {
|
||
this.$set(this.districtList[index], 'checked', !this.districtList[index].checked);
|
||
},
|
||
|
||
// 确认地区选择
|
||
confirmRegionSelect() {
|
||
const selectedDistricts = this.districtList
|
||
.filter(item => item.checked)
|
||
.map(item => `${this.selectedProvince}-${this.selectedCity}-${item.area}`);
|
||
|
||
if (selectedDistricts.length === 0) {
|
||
uni.showToast({
|
||
title: '请至少选择一个区县',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
// 更新选中的区域
|
||
this.selectedAreas = selectedDistricts;
|
||
this.hideRegionPopup();
|
||
|
||
console.log('选中的区域:', this.selectedAreas);
|
||
},
|
||
|
||
// 取消变更
|
||
cancelChange() {
|
||
// 恢复原始选择
|
||
this.selectedAreas = [...this.originalAreas];
|
||
|
||
this.editable = false;
|
||
this.buttonType = 'change';
|
||
this.showPendingArea = false;
|
||
this.updateNavTitle();
|
||
},
|
||
|
||
// 提交变更
|
||
async submitChange() {
|
||
if (this.selectedAreas.length === 0) {
|
||
uni.showToast({
|
||
title: '请先选择服务区域',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
if (!this.hasChanges) {
|
||
uni.showToast({
|
||
title: '未检测到变更',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
try {
|
||
uni.showLoading({
|
||
title: '提交中...'
|
||
});
|
||
|
||
const params = {
|
||
apply_type: 3, // 服务区域变更
|
||
servers_region: this.selectedAreas // 数组格式
|
||
};
|
||
|
||
console.log('提交参数:', params);
|
||
console.log('请求URL:', '/syr/userSyrAuth/apply');
|
||
|
||
const res = await request.post('/syr/userSyrAuth/apply', params);
|
||
|
||
uni.hideLoading();
|
||
|
||
if (res.code === 200) {
|
||
uni.showToast({
|
||
title: '提交成功',
|
||
icon: 'none'
|
||
});
|
||
|
||
// 更新页面状态为审核中
|
||
this.showAuditTip = true;
|
||
this.editable = false;
|
||
this.buttonType = 'view';
|
||
this.auditStatus = 1; // 审核中
|
||
this.showPendingArea = false;
|
||
this.updateNavTitle();
|
||
|
||
// 重新加载申请详情获取最新状态
|
||
setTimeout(() => {
|
||
this.loadApplyDetails();
|
||
}, 1000);
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg || '提交失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
} catch (error) {
|
||
uni.hideLoading();
|
||
console.error('提交变更失败:', error);
|
||
uni.showToast({
|
||
title: '提交失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.service-area-page {
|
||
background-color: #f5f5f5;
|
||
min-height: 100vh;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
/* 页面内容区域 */
|
||
.page-content {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
padding: 20rpx 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* 审核中提示 */
|
||
.audit-tip {
|
||
margin: 20rpx 24rpx 20rpx 24rpx;
|
||
border-radius: 12rpx;
|
||
}
|
||
|
||
.audit-text {
|
||
font-weight: 400;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
text-align: center;
|
||
display: block;
|
||
}
|
||
|
||
/* 驳回原因样式 */
|
||
.reject-reason {
|
||
background: transparent;
|
||
padding: 24rpx;
|
||
}
|
||
|
||
.reject-title {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
line-height: 45rpx;
|
||
text-align: center;
|
||
font-style: normal;
|
||
}
|
||
|
||
.reject-detail {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #999999;
|
||
line-height: 40rpx;
|
||
text-align: center;
|
||
font-style: normal;
|
||
margin-top: 12rpx;
|
||
|
||
}
|
||
|
||
.area-header {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.title-bar {
|
||
width: 6rpx;
|
||
height: 30rpx;
|
||
background-color: #E8101E;
|
||
margin-right: 10rpx;
|
||
border-radius: 5rpx;
|
||
}
|
||
|
||
.area-title {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #1D2129;
|
||
line-height: 48rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.box-cont {
|
||
background: #ffffff;
|
||
border-radius: 20rpx;
|
||
margin: 0 24rpx 24rpx 24rpx;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.area-container {
|
||
padding: 32rpx;
|
||
}
|
||
|
||
/* 当前区域显示 */
|
||
.current-area {
|
||
padding: 20rpx 0;
|
||
}
|
||
|
||
.area-display {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.area-value {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
flex: 1;
|
||
}
|
||
|
||
/* 待审核区域选择 */
|
||
.pending-area {
|
||
padding: 20rpx 0;
|
||
}
|
||
|
||
.area-selection {
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.area-label {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
line-height: 40rpx;
|
||
margin-bottom: 16rpx;
|
||
display: block;
|
||
}
|
||
|
||
.area-picker-trigger {
|
||
display: flex;
|
||
align-items: flex-start; /* 改为顶部对齐，避免文本过长时挤压 */
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 24rpx;
|
||
background: #F8F9FD;
|
||
border-radius: 12rpx;
|
||
border: 2rpx solid #E9E9E9;
|
||
min-height: 40rpx; /* 设置最小高度 */
|
||
}
|
||
|
||
.selected-area {
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
flex: 1; /* 让文本区域占据剩余空间 */
|
||
min-width: 0; /* 重要：允许文本区域收缩 */
|
||
word-wrap: break-word; /* 允许文本换行 */
|
||
overflow-wrap: break-word; /* 兼容性更好的换行 */
|
||
margin-right: 20rpx; /* 给箭头留出空间 */
|
||
}
|
||
|
||
.arrow-down {
|
||
width: 14rpx !important; /* 固定宽度 */
|
||
height: 26rpx !important; /* 固定高度 */
|
||
flex-shrink: 0; /* 防止箭头被压缩 */
|
||
}
|
||
|
||
/* 区域限制提示 */
|
||
.area-limit-tip {
|
||
margin-top: 16rpx;
|
||
}
|
||
|
||
.limit-text {
|
||
font-size: 24rpx;
|
||
color: #E8101E;
|
||
}
|
||
|
||
/* 区域选择器样式 */
|
||
.popup {
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
z-index: 999;
|
||
visibility: hidden;
|
||
opacity: 0;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.popup.show {
|
||
visibility: visible;
|
||
opacity: 1;
|
||
}
|
||
|
||
.popup-mask {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
.popup-content {
|
||
position: relative;
|
||
background-color: #FFFFFF;
|
||
border-radius: 24rpx 24rpx 0 0;
|
||
padding: 32rpx;
|
||
transform: translateY(100%);
|
||
transition: transform 0.3s ease;
|
||
max-height: 70vh;
|
||
}
|
||
|
||
.popup.show .popup-content {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
.region-popup {
|
||
height: 80vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 0;
|
||
}
|
||
|
||
.popup-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 20rpx;
|
||
padding: 0 32rpx;
|
||
padding-top: 32rpx;
|
||
}
|
||
|
||
.popup-title {
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.popup-close {
|
||
font-size: 40rpx;
|
||
color: #999999;
|
||
padding: 16rpx;
|
||
}
|
||
|
||
.region-tabs {
|
||
display: flex;
|
||
border-bottom: 1rpx solid #EEEEEE;
|
||
margin-bottom: 20rpx;
|
||
padding: 0 32rpx;
|
||
}
|
||
|
||
.region-tab {
|
||
flex: 1;
|
||
text-align: center;
|
||
padding: 20rpx 0;
|
||
font-size: 28rpx;
|
||
color: #666666;
|
||
position: relative;
|
||
}
|
||
|
||
.region-tab.active {
|
||
color: #E8101E;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.region-tab.active::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 40rpx;
|
||
height: 4rpx;
|
||
background-color: #E8101E;
|
||
border-radius: 2rpx;
|
||
}
|
||
|
||
.region-body {
|
||
flex: 1;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.region-scroll {
|
||
height: 100%;
|
||
padding: 0 32rpx;
|
||
}
|
||
|
||
.region-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 24rpx 0;
|
||
border-bottom: 1rpx solid #EEEEEE;
|
||
}
|
||
|
||
.region-item.checkbox-item {
|
||
padding: 20rpx 0;
|
||
width: 100%;
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.checkbox {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
border: 2rpx solid #DDDDDD;
|
||
border-radius: 8rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
.checkbox.checked {
|
||
background-color: #E8101E;
|
||
border-color: #E8101E;
|
||
}
|
||
|
||
.check-icon {
|
||
width: 42rpx;
|
||
height: 42rpx;
|
||
}
|
||
|
||
.checkbox-label {
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.arrow-right {
|
||
width: 14rpx;
|
||
height: 26rpx;
|
||
}
|
||
|
||
.popup-footer {
|
||
display: flex;
|
||
margin-top: 32rpx;
|
||
padding: 0 32rpx;
|
||
padding-bottom: 32rpx;
|
||
}
|
||
|
||
.popup-btn {
|
||
flex: 1;
|
||
height: 88rpx;
|
||
border-radius: 44rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: 0 16rpx;
|
||
}
|
||
|
||
.popup-btn.cancel {
|
||
background-color: #F5F5F5;
|
||
}
|
||
|
||
.popup-btn.confirm {
|
||
background: linear-gradient(180deg, #f52540 0%, #e8101e 100%);
|
||
}
|
||
|
||
.popup-btn .btn-text {
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.popup-btn.cancel .btn-text {
|
||
color: #666666;
|
||
}
|
||
|
||
.popup-btn.confirm .btn-text {
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
/* 底部按钮样式 */
|
||
.bottom-actions {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
padding: 0rpx 24rpx 40rpx 24rpx;
|
||
background: #ffffff;
|
||
z-index: 100;
|
||
}
|
||
|
||
/* 单个按钮样式 */
|
||
.action-btn {
|
||
height: 88rpx;
|
||
border-radius: 43rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 32rpx;
|
||
font-weight: 400;
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.change-info-btn {
|
||
background: linear-gradient(180deg, #f52540 0%, #e8101e 100%);
|
||
}
|
||
|
||
.view-change-btn {
|
||
background: linear-gradient(180deg, #f52540 0%, #e8101e 100%);
|
||
}
|
||
|
||
/* 双按钮行样式 */
|
||
.action-buttons-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin: 0 30rpx;
|
||
}
|
||
|
||
.action-buttons-row .action-btn {
|
||
width: 270rpx;
|
||
}
|
||
|
||
.cancel-btn {
|
||
background: #E5E5E5;
|
||
border-radius: 43rpx;
|
||
padding: 0 15rpx;
|
||
}
|
||
|
||
.submit-btn {
|
||
background: linear-gradient(180deg, #F52540 0%, #E8101E 100%, #E8101E 100%);
|
||
border-radius: 43rpx;
|
||
padding: 0 15rpx;
|
||
}
|
||
|
||
.btn-text {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 36rpx;
|
||
color: #FFFFFF;
|
||
line-height: 50rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.cancel-text {
|
||
color: #666666;
|
||
}
|
||
</style>
|