deliveryman/beefast-website
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
aaron 2025-03-04 11:52:11 +08:00
parent 07aa07bbb7
commit ce3fed4040
2 changed files with 305 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

114
src/components/CommunityRequest.vue
View File

@ -32,13 +32,16 @@
</form>
</div>
<!-- 提交成功弹窗 -->
<div class="success-modal" v-if="showSuccessModal">
<!-- 将成功弹窗改为通用模态弹窗 -->
<div class="modal" v-if="showModal">
<div class="modal-content">
<div class="success-icon">✓</div>
<h3>申请提交成功</h3>
<p>我们将尽快处理您的小区开通申请</p>
<button @click="closeSuccessModal" class="btn-confirm">确定</button>
<div class="modal-icon" :class="{ 'success-icon': isSuccess, 'error-icon': !isSuccess }">
<span v-if="isSuccess">✓</span>
<span v-else>!</span>
</div>
<h3>{{ modalTitle }}</h3>
<p>{{ modalMessage }}</p>
<button @click="closeModal" class="btn-confirm">确定</button>
</div>
</div>
</div>
@ -55,7 +58,12 @@ export default {
const router = useRouter()
const route = useRoute()
const isSubmitting = ref(false)
const showSuccessModal = ref(false)
// 替换 showSuccessModal 为更通用的 showModal
const showModal = ref(false)
// 添加状态标志和消息内容
const isSuccess = ref(true)
const modalTitle = ref('')
const modalMessage = ref('')
const userId = ref('')
const lastTouchEnd = ref(0)
@ -128,42 +136,68 @@ export default {
}
const submitRequest = async () => {
try {
if (!userId.value) {
alert('缺少用户ID，无法提交申请')
return
}
if (isSubmitting.value) return
isSubmitting.value = true
// 构建提交数据，添加 user_id
const submitData = {
user_id: userId.value,
try {
// 构建请求数据 - 使用正确的参数格式
const requestData = {
user_id: userId.value || 0,
community_name: formData.communityName,
community_address: formData.address
}
// 使用 apiClient 而不是 axios
const response = await apiClient.post('/api/feedback/community-apply', submitData)
// 发送请求
const response = await apiClient.post('/api/feedback/community-apply', requestData)
console.log('提交成功:', response.data)
// 检查返回的状态码
if (response.data && response.data.code === 200) {
console.log('申请提交成功:', response.data)
// 显示成功弹窗
showSuccessModal.value = true
isSuccess.value = true
modalTitle.value = '申请提交成功'
modalMessage.value = '我们将尽快审核您的小区开通申请'
showModal.value = true
// 重置表单
formData.communityName = ''
formData.address = ''
} else {
// 显示错误弹窗
const errorMessage = response.data?.message || '提交失败，请稍后重试'
console.error('提交申请失败:', errorMessage)
isSuccess.value = false
modalTitle.value = '提交失败'
modalMessage.value = errorMessage
showModal.value = true
}
} catch (error) {
console.error('提交失败:', error)
alert('提交失败，请稍后重试')
console.error('提交申请失败:', error)
// 尝试从错误响应中获取详细信息
const errorMessage = error.response?.data?.message || '提交失败，请稍后重试'
isSuccess.value = false
modalTitle.value = '提交失败'
modalMessage.value = errorMessage
showModal.value = true
} finally {
isSubmitting.value = false
}
}
const closeSuccessModal = () => {
showSuccessModal.value = false
// 替换 closeSuccessModal 为更通用的 closeModal
const closeModal = () => {
showModal.value = false
// 返回上一页或小程序页面
// 如果是成功状态，关闭弹窗后返回上一页
if (isSuccess.value) {
goBack()
}
}
const goBack = () => {
// 如果在小程序环境中，调用小程序的返回方法
@ -178,9 +212,12 @@ export default {
return {
formData,
isSubmitting,
showSuccessModal,
showModal,
isSuccess,
modalTitle,
modalMessage,
submitRequest,
closeSuccessModal,
closeModal,
goBack,
handleTouchStart
}
@ -307,13 +344,13 @@ export default {
background-color: #FFD633;
}
/* 成功弹窗样式 */
.success-modal {
/* 添加模态弹窗样式 */
.modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
@ -333,10 +370,9 @@ export default {
align-items: center;
}
.success-icon {
.modal-icon {
width: 60px;
height: 60px;
background-color: #FFCC00;
border-radius: 50%;
display: flex;
justify-content: center;
@ -346,6 +382,14 @@ export default {
margin-bottom: 20px;
}
.success-icon {
background-color: #FFCC00;
}
.error-icon {
background-color: #FF6B6B;
}
.modal-content h3 {
font-size: 20px;
margin-bottom: 10px;
@ -361,7 +405,13 @@ export default {
background-color: #FFCC00;
color: #333333;
border: none;
border-radius: 8px;
padding: 12px 15px;
width: 100%;
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: background-color 0.3s;
}
.btn-confirm:hover {

304
src/components/PartnerRequest.vue
View File

@ -15,6 +15,7 @@
<div class="form-group">
<label for="phone">您的电话</label>
<div class="phone-input-group">
<input
type="tel"
id="phone"
@ -23,6 +24,26 @@
required
pattern="[0-9]{11}"
/>
<button
type="button"
class="btn-send-code"
@click="sendVerificationCode"
:disabled="cooldown > 0"
>
{{ cooldown > 0 ? `${cooldown}秒后重发` : '发送验证码' }}
</button>
</div>
</div>
<div class="form-group">
<label for="phoneCode">验证码</label>
<input
type="text"
id="phoneCode"
v-model="formData.phone_code"
placeholder="请输入短信验证码"
required
/>
</div>
<div class="form-group">
@ -74,13 +95,16 @@
</form>
</div>
<!-- 提交成功弹窗 -->
<div class="success-modal" v-if="showSuccessModal">
<!-- 成功弹窗 -->
<div class="modal" v-if="showModal">
<div class="modal-content">
<div class="success-icon">✓</div>
<h3>申请提交成功</h3>
<p>我们将尽快审核您的合伙人申请</p>
<button @click="closeSuccessModal" class="btn-confirm">确定</button>
<div class="modal-icon" :class="{ 'success-icon': isSuccess, 'error-icon': !isSuccess }">
<span v-if="isSuccess">✓</span>
<span v-else>!</span>
</div>
<h3>{{ modalTitle }}</h3>
<p>{{ modalMessage }}</p>
<button @click="closeModal" class="btn-confirm">确定</button>
</div>
</div>
</div>
@ -97,14 +121,19 @@ export default {
const router = useRouter()
const route = useRoute()
const isSubmitting = ref(false)
const showSuccessModal = ref(false)
const showModal = ref(false)
const isSuccess = ref(true)
const modalTitle = ref('')
const modalMessage = ref('')
const userId = ref('')
const lastTouchEnd = ref(0)
const cooldown = ref(0)
const formData = reactive({
name: '',
phone: '',
partnerType: 'community', // 默认选择小区服务商
phone_code: '',
partnerType: 'community',
serviceArea: ''
})
@ -130,91 +159,122 @@ export default {
lastTouchEnd.value = now
}
const handleTouchMove = (event) => {
if (event.touches.length > 1) {
event.preventDefault()
}
}
document.addEventListener('touchend', handleTouchEnd, { passive: false })
document.addEventListener('touchmove', handleTouchMove, { passive: false })
// 保存引用以便在组件卸载时移除
window._partnerRequestTouchHandlers = {
handleTouchEnd,
handleTouchMove
}
})
document.addEventListener('touchend', handleTouchEnd)
onBeforeUnmount(() => {
// 移除事件监听器
if (window._partnerRequestTouchHandlers) {
document.removeEventListener('touchend', window._partnerRequestTouchHandlers.handleTouchEnd)
document.removeEventListener('touchmove', window._partnerRequestTouchHandlers.handleTouchMove)
delete window._partnerRequestTouchHandlers
}
document.removeEventListener('touchend', handleTouchEnd)
document.title = '蜂快到家'
})
})
const handleTouchStart = (event) => {
// 防止双击缩放
if (event.touches.length > 1) {
event.preventDefault()
}
}
const checkMiniProgramEnvironment = () => {
// 检测是否在微信小程序环境中
const ua = navigator.userAgent.toLowerCase()
const isMiniProgram = ua.indexOf('miniprogram') > -1 || window.__wxjs_environment === 'miniprogram'
// 检查是否在微信小程序环境中
const userAgent = navigator.userAgent.toLowerCase()
const isWechatMiniProgram = /miniprogram/.test(userAgent) || window.__wxjs_environment === 'miniprogram'
console.log('Is Mini Program:', isMiniProgram)
console.log('是否在小程序环境中:', isWechatMiniProgram)
}
const selectPartnerType = (type) => {
formData.partnerType = type
// 切换类型时清空服务区域
formData.serviceArea = ''
}
const submitRequest = async () => {
try {
if (!userId.value) {
alert('缺少用户ID，无法提交申请')
const sendVerificationCode = async () => {
// 验证手机号格式
if (!/^1[3-9]\d{9}$/.test(formData.phone)) {
alert('请输入正确的手机号码')
return
}
try {
// 发送验证码请求
await apiClient.post('/api/user/send-code', {
phone: formData.phone
})
// 设置倒计时
cooldown.value = 60
const timer = setInterval(() => {
cooldown.value--
if (cooldown.value <= 0) {
clearInterval(timer)
}
}, 1000)
alert('验证码已发送，请注意查收')
} catch (error) {
console.error('发送验证码失败:', error)
alert('发送验证码失败，请稍后重试')
}
}
const submitRequest = async () => {
if (isSubmitting.value) return
isSubmitting.value = true
// 构建提交数据，添加 user_id
const submitData = {
user_id: userId.value,
try {
// 构建请求数据
const requestData = {
user_id: userId.value || 0,
name: formData.name,
phone: formData.phone,
phone_code: formData.phone_code,
type: formData.partnerType,
service_target: formData.serviceArea
}
// 使用 apiClient 而不是 axios
const response = await apiClient.post('/api/feedback/partner-apply', submitData)
// 发送请求
const response = await apiClient.post('/api/feedback/partner-apply', requestData)
console.log('提交成功:', response.data)
// 检查返回的状态码
if (response.data && response.data.code === 200) {
console.log('申请提交成功:', response.data)
// 显示成功弹窗
showSuccessModal.value = true
isSuccess.value = true
modalTitle.value = '申请提交成功'
modalMessage.value = '我们将尽快处理您的合伙人申请'
showModal.value = true
// 重置表单
formData.name = ''
formData.phone = ''
formData.phone_code = ''
formData.serviceArea = ''
} else {
// 显示错误弹窗
const errorMessage = response.data?.message || '提交失败，请稍后重试'
console.error('提交申请失败:', errorMessage)
isSuccess.value = false
modalTitle.value = '提交失败'
modalMessage.value = errorMessage
showModal.value = true
}
} catch (error) {
console.error('提交失败:', error)
alert('提交失败，请稍后重试')
console.error('提交申请失败:', error)
// 尝试从错误响应中获取详细信息
const errorMessage = error.response?.data?.message || '提交失败，请稍后重试'
isSuccess.value = false
modalTitle.value = '提交失败'
modalMessage.value = errorMessage
showModal.value = true
} finally {
isSubmitting.value = false
}
}
const closeSuccessModal = () => {
showSuccessModal.value = false
const closeModal = () => {
showModal.value = false
// 返回上一页或小程序页面
// 如果是成功状态，关闭弹窗后返回上一页
if (isSuccess.value) {
goBack()
}
}
const goBack = () => {
// 如果在小程序环境中，调用小程序的返回方法
@ -226,15 +286,27 @@ export default {
}
}
const handleTouchStart = (event) => {
// 防止iOS双击缩放
if (event.touches.length > 1) {
event.preventDefault()
}
}
return {
formData,
isSubmitting,
showSuccessModal,
showModal,
isSuccess,
modalTitle,
modalMessage,
selectPartnerType,
submitRequest,
closeSuccessModal,
closeModal,
goBack,
handleTouchStart,
selectPartnerType
sendVerificationCode,
cooldown
}
}
}
@ -242,21 +314,15 @@ export default {
<style scoped>
.partner-request-container {
/* 添加触摸相关样式 */
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
touch-action: manipulation;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px 15px;
justify-content: flex-start;
padding: 20px 15px 30px;
background: linear-gradient(to bottom, #FFCC00, #FFFFFF);
position: relative;
overflow: hidden;
}
.request-card {
@ -269,11 +335,11 @@ export default {
}
.page-title {
font-size: 22px;
font-size: 24px;
font-weight: bold;
color: #333333;
text-align: center;
margin-bottom: 25px;
text-align: center;
}
.request-form {
@ -310,6 +376,39 @@ export default {
outline: none;
}
/* 手机号输入组样式 */
.phone-input-group {
display: flex;
gap: 10px;
}
.phone-input-group input {
flex: 1;
}
.btn-send-code {
padding: 0 15px;
background-color: #FFCC00;
color: #333333;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
white-space: nowrap;
transition: background-color 0.3s;
}
.btn-send-code:hover {
background-color: #FFD633;
}
.btn-send-code:disabled {
background-color: #DDDDDD;
color: #999999;
cursor: not-allowed;
}
/* 合伙类型选择器样式 */
.partner-type-selector {
display: flex;
@ -363,25 +462,25 @@ export default {
.form-actions {
display: flex;
justify-content: space-between;
gap: 15px;
margin-top: 10px;
}
.btn-cancel,
.btn-submit,
.btn-confirm {
padding: 12px 25px;
.btn-cancel, .btn-submit {
flex: 1;
padding: 12px 15px;
border-radius: 8px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s;
text-align: center;
}
.btn-cancel {
background-color: #F5F5F5;
background-color: #F2F2F2;
color: #666666;
border: 1px solid #DDDDDD;
border: none;
}
.btn-submit {
@ -390,26 +489,27 @@ export default {
border: none;
}
.btn-submit:disabled {
background-color: #FFE580;
cursor: not-allowed;
}
.btn-cancel:hover {
background-color: #EEEEEE;
background-color: #E6E6E6;
}
.btn-submit:hover:not(:disabled) {
.btn-submit:hover {
background-color: #FFD633;
}
.btn-submit:disabled {
background-color: #DDDDDD;
color: #999999;
cursor: not-allowed;
}
/* 成功弹窗样式 */
.success-modal {
.modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
@ -429,10 +529,9 @@ export default {
align-items: center;
}
.success-icon {
.modal-icon {
width: 60px;
height: 60px;
background-color: #FFCC00;
border-radius: 50%;
display: flex;
justify-content: center;
@ -442,6 +541,14 @@ export default {
margin-bottom: 20px;
}
.success-icon {
background-color: #FFCC00;
}
.error-icon {
background-color: #FF6B6B;
}
.modal-content h3 {
font-size: 20px;
margin-bottom: 10px;
@ -457,7 +564,13 @@ export default {
background-color: #FFCC00;
color: #333333;
border: none;
border-radius: 8px;
padding: 12px 15px;
width: 100%;
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: background-color 0.3s;
}
.btn-confirm:hover {
@ -486,17 +599,12 @@ export default {
font-size: 15px;
}
.partner-type-selector {
flex-direction: column;
gap: 10px;
}
.partner-type-option {
padding: 10px 12px;
}
.option-label {
font-size: 15px;
font-size: 14px;
}
}
</style>