update
This commit is contained in:
aaron
parent
71b066b264
commit
4d9d0b939c
349
src/components/CommunityRequest.vue
Normal file
349
src/components/CommunityRequest.vue
Normal file
@ -0,0 +1,349 @@
|
|||||||
|
<template>
|
||||||
|
<div class="community-request-container">
|
||||||
|
<div class="request-card">
|
||||||
|
<h2 class="page-title">小区开通申请</h2>
|
||||||
|
|
||||||
|
<form @submit.prevent="submitRequest" class="request-form">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="communityName">小区名称</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="communityName"
|
||||||
|
v-model="formData.communityName"
|
||||||
|
placeholder="请输入小区名称"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="address">详细地址</label>
|
||||||
|
<textarea
|
||||||
|
id="address"
|
||||||
|
v-model="formData.address"
|
||||||
|
placeholder="请输入详细地址信息，包括省市区、街道名称、门牌号等"
|
||||||
|
required
|
||||||
|
></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-actions">
|
||||||
|
<button type="button" class="btn-cancel" @click="goBack">取消</button>
|
||||||
|
<button type="submit" class="btn-submit" :disabled="isSubmitting">
|
||||||
|
{{ isSubmitting ? '提交中...' : '提交申请' }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 提交成功弹窗 -->
|
||||||
|
<div class="success-modal" v-if="showSuccessModal">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="success-icon">✓</div>
|
||||||
|
<h3>申请提交成功</h3>
|
||||||
|
<p>我们将尽快处理您的小区开通申请</p>
|
||||||
|
<button @click="closeSuccessModal" class="btn-confirm">确定</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { ref, reactive, onMounted } from 'vue'
|
||||||
|
import { useRouter, useRoute } from 'vue-router'
|
||||||
|
import axios from 'axios'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'CommunityRequest',
|
||||||
|
setup() {
|
||||||
|
const router = useRouter()
|
||||||
|
const route = useRoute()
|
||||||
|
const isSubmitting = ref(false)
|
||||||
|
const showSuccessModal = ref(false)
|
||||||
|
const userId = ref('')
|
||||||
|
|
||||||
|
const formData = reactive({
|
||||||
|
communityName: '',
|
||||||
|
address: ''
|
||||||
|
})
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
// 从URL获取userId
|
||||||
|
userId.value = route.query.userid || ''
|
||||||
|
|
||||||
|
if (!userId.value) {
|
||||||
|
console.warn('未找到用户ID，可能影响提交功能')
|
||||||
|
}
|
||||||
|
|
||||||
|
// 检测是否在小程序环境中
|
||||||
|
checkMiniProgramEnvironment()
|
||||||
|
|
||||||
|
// 设置页面标题
|
||||||
|
document.title = '小区开通申请'
|
||||||
|
})
|
||||||
|
|
||||||
|
const checkMiniProgramEnvironment = () => {
|
||||||
|
// 检测是否在微信小程序环境中
|
||||||
|
const ua = navigator.userAgent.toLowerCase()
|
||||||
|
const isMiniProgram = ua.indexOf('miniprogram') > -1 || window.__wxjs_environment === 'miniprogram'
|
||||||
|
|
||||||
|
console.log('Is Mini Program:', isMiniProgram)
|
||||||
|
}
|
||||||
|
|
||||||
|
const submitRequest = async () => {
|
||||||
|
try {
|
||||||
|
if (!userId.value) {
|
||||||
|
alert('缺少用户ID，无法提交申请')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
isSubmitting.value = true
|
||||||
|
|
||||||
|
// 构建提交数据
|
||||||
|
const submitData = {
|
||||||
|
userId: userId.value,
|
||||||
|
communityName: formData.communityName,
|
||||||
|
address: formData.address
|
||||||
|
}
|
||||||
|
|
||||||
|
// 这里替换为您的实际API接口
|
||||||
|
// const response = await axios.post('/api/community/request', submitData)
|
||||||
|
|
||||||
|
// 模拟API调用
|
||||||
|
await new Promise(resolve => setTimeout(resolve, 1000))
|
||||||
|
|
||||||
|
console.log('提交的数据:', submitData)
|
||||||
|
|
||||||
|
// 显示成功弹窗
|
||||||
|
showSuccessModal.value = true
|
||||||
|
} catch (error) {
|
||||||
|
console.error('提交失败:', error)
|
||||||
|
alert('提交失败，请稍后重试')
|
||||||
|
} finally {
|
||||||
|
isSubmitting.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const closeSuccessModal = () => {
|
||||||
|
showSuccessModal.value = false
|
||||||
|
|
||||||
|
// 返回上一页或小程序页面
|
||||||
|
goBack()
|
||||||
|
}
|
||||||
|
|
||||||
|
const goBack = () => {
|
||||||
|
// 如果在小程序环境中，调用小程序的返回方法
|
||||||
|
if (window.wx && window.wx.miniProgram) {
|
||||||
|
window.wx.miniProgram.navigateBack({ delta: 1 })
|
||||||
|
} else {
|
||||||
|
// 否则使用路由返回
|
||||||
|
router.back()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
formData,
|
||||||
|
isSubmitting,
|
||||||
|
showSuccessModal,
|
||||||
|
submitRequest,
|
||||||
|
closeSuccessModal,
|
||||||
|
goBack
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.community-request-container {
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
padding: 20px 15px;
|
||||||
|
background: linear-gradient(to bottom, #FFCC00, #FFFFFF);
|
||||||
|
}
|
||||||
|
|
||||||
|
.request-card {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 90%;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
border-radius: 20px;
|
||||||
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||||
|
padding: 25px 20px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-title {
|
||||||
|
font-size: 22px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333333;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.request-form {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group label {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group input,
|
||||||
|
.form-group textarea {
|
||||||
|
padding: 12px 15px;
|
||||||
|
border: 1px solid #DDDDDD;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #333333;
|
||||||
|
background-color: #F9F9F9;
|
||||||
|
transition: border-color 0.3s, box-shadow 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group input:focus,
|
||||||
|
.form-group textarea:focus {
|
||||||
|
border-color: #FFCC00;
|
||||||
|
box-shadow: 0 0 0 2px rgba(255, 204, 0, 0.2);
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group textarea {
|
||||||
|
min-height: 120px;
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-actions {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-cancel,
|
||||||
|
.btn-submit,
|
||||||
|
.btn-confirm {
|
||||||
|
padding: 12px 25px;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-cancel {
|
||||||
|
background-color: #F5F5F5;
|
||||||
|
color: #666666;
|
||||||
|
border: 1px solid #DDDDDD;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-submit {
|
||||||
|
background-color: #FFCC00;
|
||||||
|
color: #333333;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-submit:disabled {
|
||||||
|
background-color: #FFE580;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-cancel:hover {
|
||||||
|
background-color: #EEEEEE;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-submit:hover:not(:disabled) {
|
||||||
|
background-color: #FFD633;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 成功弹窗样式 */
|
||||||
|
.success-modal {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-content {
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
border-radius: 15px;
|
||||||
|
padding: 30px;
|
||||||
|
width: 80%;
|
||||||
|
max-width: 350px;
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.success-icon {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
background-color: #FFCC00;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 30px;
|
||||||
|
color: white;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-content h3 {
|
||||||
|
font-size: 20px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-content p {
|
||||||
|
color: #666666;
|
||||||
|
margin-bottom: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-confirm {
|
||||||
|
background-color: #FFCC00;
|
||||||
|
color: #333333;
|
||||||
|
border: none;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-confirm:hover {
|
||||||
|
background-color: #FFD633;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 响应式调整 */
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.request-card {
|
||||||
|
padding: 20px 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-title {
|
||||||
|
font-size: 20px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group label {
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group input,
|
||||||
|
.form-group textarea,
|
||||||
|
.btn-cancel,
|
||||||
|
.btn-submit {
|
||||||
|
padding: 10px 12px;
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -4,6 +4,7 @@ import PrivacyAgreement from '../components/PrivacyAgreement.vue'
|
|||||||
import UserAgreement from '../components/UserAgreement.vue'
|
import UserAgreement from '../components/UserAgreement.vue'
|
||||||
import Dashboard from '../components/Dashboard.vue'
|
import Dashboard from '../components/Dashboard.vue'
|
||||||
import HowToUse from '../components/HowToUse.vue'
|
import HowToUse from '../components/HowToUse.vue'
|
||||||
|
import CommunityRequest from '../components/CommunityRequest.vue'
|
||||||
|
|
||||||
const routes = [
|
const routes = [
|
||||||
{
|
{
|
||||||
@ -36,6 +37,14 @@ const routes = [
|
|||||||
meta: {
|
meta: {
|
||||||
title: '代取快递服务流程'
|
title: '代取快递服务流程'
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/community-request',
|
||||||
|
name: 'CommunityRequest',
|
||||||
|
component: CommunityRequest,
|
||||||
|
meta: {
|
||||||
|
title: '小区开通申请'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user