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 Dashboard from '../components/Dashboard.vue'
|
||||
import HowToUse from '../components/HowToUse.vue'
|
||||
import CommunityRequest from '../components/CommunityRequest.vue'
|
||||
|
||||
const routes = [
|
||||
{
|
||||
@ -36,6 +37,14 @@ const routes = [
|
||||
meta: {
|
||||
title: '代取快递服务流程'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/community-request',
|
||||
name: 'CommunityRequest',
|
||||
component: CommunityRequest,
|
||||
meta: {
|
||||
title: '小区开通申请'
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user