feat: 新增工单中心、房间巡查、失物招领等业务模块
- 新增工单中心(ticket_center)与工单工作台(ticket_workbench)页面 - 新增房间巡查(room_inspection)与失物招领发布(lost_found_publish)页面 - 预约看样流程新增房型/楼栋/楼层选择器组件 - 新增工具模块: booking-entry、privacy、reservation-flow - api/index.js 补充楼层列表、看样提交等接口 - locales/messages.js 补充多语言文案 - manifest.json 开启微信小程序隐私检查 - 完善登录、注册、申请详情、账单等相关页面交互
This commit is contained in:
liangjian
554
pkgService/lost_found_publish/lost_found_publish.vue
Normal file
554
pkgService/lost_found_publish/lost_found_publish.vue
Normal file
@@ -0,0 +1,554 @@
|
||||
<template>
|
||||
<view class="lost-found-page tn-safe-area-inset-bottom">
|
||||
<tn-nav-bar
|
||||
:isBack="true"
|
||||
:bottomShadow="false"
|
||||
:backgroundColor="navBarBackgroundColor"
|
||||
:customBackStyle="navBarBackStyle"
|
||||
:fixed="true"
|
||||
>
|
||||
<view class="tn-text-bold tn-text-xl tn-color-black" :style="{ opacity: navTitleOpacity }">{{ t('navTitle') }}</view>
|
||||
</tn-nav-bar>
|
||||
|
||||
<scroll-view class="page-scroll" scroll-y :show-scrollbar="false" @scroll="handleScroll">
|
||||
<view class="page-content tn-padding" :style="{ paddingTop: vuex_custom_bar_height + 'px', paddingBottom: '220rpx' }">
|
||||
<view class="hero-header tn-margin-bottom-xl">
|
||||
<view class="hero-badge">
|
||||
<text class="badge-dot"></text>
|
||||
<text>{{ t('heroBadge') }}</text>
|
||||
</view>
|
||||
<view class="hero-title">{{ t('heroTitle') }}</view>
|
||||
<view class="hero-desc">{{ t('heroDesc') }}</view>
|
||||
</view>
|
||||
|
||||
<view class="form-card">
|
||||
<view class="block-title">{{ t('formTitle') }}</view>
|
||||
<view class="block-subtitle">{{ t('formDesc') }}</view>
|
||||
|
||||
<view class="form-item tn-margin-top">
|
||||
<view class="form-label">{{ t('typeLabel') }}</view>
|
||||
<picker mode="selector" :range="typeLabels" @change="handleTypeChange">
|
||||
<view class="form-picker">
|
||||
{{ selectedTypeLabel || t('typePlaceholder') }}
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
<view class="form-item tn-margin-top">
|
||||
<view class="form-label">{{ t('itemTypeLabel') }}</view>
|
||||
<input v-model="form.itemType" class="form-input" :placeholder="t('itemTypePlaceholder')" maxlength="40" />
|
||||
</view>
|
||||
|
||||
<view class="form-item tn-margin-top">
|
||||
<view class="form-label">{{ t('itemNameLabel') }}</view>
|
||||
<input v-model="form.itemName" class="form-input" :placeholder="t('itemNamePlaceholder')" maxlength="60" />
|
||||
</view>
|
||||
|
||||
<view class="form-item tn-margin-top">
|
||||
<view class="form-label">{{ t('placeLabel') }}</view>
|
||||
<input v-model="form.place" class="form-input" :placeholder="t('placePlaceholder')" maxlength="100" />
|
||||
</view>
|
||||
|
||||
<view class="form-item tn-margin-top">
|
||||
<view class="form-label">{{ t('whenLabel') }}</view>
|
||||
<view class="picker-row">
|
||||
<picker mode="date" :value="form.whenDate" @change="handleDateChange">
|
||||
<view class="form-picker">{{ form.whenDate || t('selectDate') }}</view>
|
||||
</picker>
|
||||
<picker mode="time" :value="form.whenTime" @change="handleTimeChange">
|
||||
<view class="form-picker form-picker--time">{{ form.whenTime || t('selectTime') }}</view>
|
||||
</picker>
|
||||
</view>
|
||||
<view class="field-tip">{{ t('whenTip') }}</view>
|
||||
</view>
|
||||
|
||||
<view class="form-item tn-margin-top">
|
||||
<view class="form-label">{{ t('contractLabel') }}</view>
|
||||
<input v-model="form.contract" class="form-input" :placeholder="t('contractPlaceholder')" maxlength="40" />
|
||||
</view>
|
||||
|
||||
<view class="form-item tn-margin-top">
|
||||
<view class="form-label">{{ t('contractPhoneLabel') }}</view>
|
||||
<input v-model="form.contractPhone" class="form-input" :placeholder="t('contractPhonePlaceholder')" maxlength="30" />
|
||||
</view>
|
||||
|
||||
<view class="form-item tn-margin-top">
|
||||
<view class="form-label">{{ t('remarkLabel') }}</view>
|
||||
<textarea
|
||||
v-model="form.remark"
|
||||
class="form-textarea"
|
||||
:placeholder="t('remarkPlaceholder')"
|
||||
maxlength="300"
|
||||
></textarea>
|
||||
<view class="field-counter">{{ (form.remark || '').length }}/300</view>
|
||||
</view>
|
||||
|
||||
<view class="form-item tn-margin-top">
|
||||
<view class="form-label">{{ t('imagesLabel') }}</view>
|
||||
<tn-image-upload
|
||||
:key="uploadInstanceKey"
|
||||
:fileList="form.photos"
|
||||
:action="uploadAction"
|
||||
:header="uploadHeaders"
|
||||
:formData="uploadFormData"
|
||||
:max-count="6"
|
||||
:max-size="5 * 1024 * 1024"
|
||||
uploadText=""
|
||||
@on-success="onUploadSuccess"
|
||||
@on-list-change="onPhotoListChange"
|
||||
@on-remove="onRemoveImage"
|
||||
@on-error="onUploadError"
|
||||
@on-oversize="onUploadOversize"
|
||||
@on-exceed="onUploadExceed"
|
||||
>
|
||||
<template #addBtn>
|
||||
<view class="upload-trigger">
|
||||
<text class="tn-icon-camera-fill upload-trigger__icon"></text>
|
||||
<view class="upload-trigger__text">{{ t('uploadImage') }}</view>
|
||||
</view>
|
||||
</template>
|
||||
</tn-image-upload>
|
||||
<view class="field-tip">{{ t('imagesTip') }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<view class="floating-submit-bar">
|
||||
<view class="floating-submit-bar__inner">
|
||||
<view class="floating-submit-tip">{{ t('submitTip') }}</view>
|
||||
<view class="submit-btn btn-primary" :class="{ 'submit-btn--disabled': isSubmitting }" @click="submitForm">
|
||||
<text class="tn-text-bold">{{ isSubmitting ? t('submitting') : t('submitButton') }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { API_BASE_URL } from '@/utils/request'
|
||||
import { getAuthToken } from '@/utils/app-state'
|
||||
import { addFilePrefix } from '@/utils/common'
|
||||
import { lostAndFoundPublish } from '@/api/index.js'
|
||||
import { getStoredUser } from '@/utils/flow'
|
||||
|
||||
function pickReadableValue(...values) {
|
||||
for (let index = 0; index < values.length; index += 1) {
|
||||
const text = String(values[index] || '').trim()
|
||||
if (text) {
|
||||
return text
|
||||
}
|
||||
}
|
||||
return ''
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'LostFoundPublishPage',
|
||||
data() {
|
||||
return {
|
||||
scrollTop: 0,
|
||||
isSubmitting: false,
|
||||
uploadInstanceKey: 0,
|
||||
form: this.createDefaultForm()
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
language() {
|
||||
return this.$getLanguage ? this.$getLanguage() : 'zh'
|
||||
},
|
||||
navBarBackgroundColor() {
|
||||
if (this.scrollTop < 40) return 'rgba(255, 255, 255, 0)'
|
||||
return 'rgba(255, 255, 255, 0.96)'
|
||||
},
|
||||
navBarBackStyle() {
|
||||
const isDarkBg = this.scrollTop < 40
|
||||
return {
|
||||
transition: 'all 0.2s ease',
|
||||
background: isDarkBg ? 'rgba(0, 0, 0, 0.2)' : 'transparent',
|
||||
borderRadius: '50%',
|
||||
width: '64rpx',
|
||||
height: '64rpx',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginLeft: '12rpx',
|
||||
color: isDarkBg ? '#FFFFFF' : '#000000'
|
||||
}
|
||||
},
|
||||
navTitleOpacity() {
|
||||
return Math.min(Math.max((this.scrollTop - 40) / 50, 0), 1)
|
||||
},
|
||||
typeOptions() {
|
||||
return [
|
||||
{ value: 1, label: this.t('typeLost'), labelEn: this.t('typeLost') },
|
||||
{ value: 2, label: this.t('typeFound'), labelEn: this.t('typeFound') }
|
||||
]
|
||||
},
|
||||
typeLabels() {
|
||||
return this.typeOptions.map(item => item.label)
|
||||
},
|
||||
selectedTypeLabel() {
|
||||
const current = this.typeOptions.find(item => item.value === this.form.type)
|
||||
return current ? current.label : ''
|
||||
},
|
||||
uploadAction() {
|
||||
return `${String(API_BASE_URL || '').replace(/\/$/, '')}/file/common/upload`
|
||||
},
|
||||
uploadHeaders() {
|
||||
const token = getAuthToken()
|
||||
return {
|
||||
...(token ? { Authorization: `Bearer ${token}` } : {}),
|
||||
'X-Requested-Language': this.language === 'en' ? 'en' : 'zh'
|
||||
}
|
||||
},
|
||||
uploadFormData() {
|
||||
return {
|
||||
ProviderType: 'WechatMiniProgram'
|
||||
}
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.prefillContact()
|
||||
},
|
||||
methods: {
|
||||
t(key, params) {
|
||||
return this.$tm('pkgService.lost_found_publish.lost_found_publish', key, params)
|
||||
},
|
||||
createDefaultForm() {
|
||||
return {
|
||||
type: 1,
|
||||
itemType: '',
|
||||
itemName: '',
|
||||
place: '',
|
||||
whenDate: '',
|
||||
whenTime: '',
|
||||
contract: '',
|
||||
contractPhone: '',
|
||||
remark: '',
|
||||
photos: [],
|
||||
imageUrls: []
|
||||
}
|
||||
},
|
||||
prefillContact() {
|
||||
const user = getStoredUser() || {}
|
||||
this.form.contract = this.form.contract || pickReadableValue(user.name, user.realName, user.username)
|
||||
this.form.contractPhone = this.form.contractPhone || pickReadableValue(user.phone, user.mobile, user.tel)
|
||||
},
|
||||
handleScroll(e) {
|
||||
this.scrollTop = e.detail.scrollTop
|
||||
},
|
||||
handleTypeChange(event) {
|
||||
const index = Number(event && event.detail ? event.detail.value : 0)
|
||||
const target = this.typeOptions[index]
|
||||
this.form.type = target ? target.value : 1
|
||||
},
|
||||
handleDateChange(event) {
|
||||
this.form.whenDate = event && event.detail ? event.detail.value : ''
|
||||
},
|
||||
handleTimeChange(event) {
|
||||
this.form.whenTime = event && event.detail ? event.detail.value : ''
|
||||
},
|
||||
resolveWhenValue() {
|
||||
if (!this.form.whenDate) {
|
||||
return null
|
||||
}
|
||||
const timeText = this.form.whenTime || '00:00'
|
||||
return `${this.form.whenDate}T${timeText}:00`
|
||||
},
|
||||
resolveUploadedFileUrl(uploadResult) {
|
||||
return pickReadableValue(
|
||||
uploadResult && uploadResult.data && uploadResult.data.url,
|
||||
uploadResult && uploadResult.data && uploadResult.data.fileUrl,
|
||||
uploadResult && uploadResult.data && uploadResult.data.path,
|
||||
uploadResult && uploadResult.data,
|
||||
uploadResult && uploadResult.url,
|
||||
uploadResult && uploadResult.fileUrl,
|
||||
uploadResult && uploadResult.path,
|
||||
typeof uploadResult === 'string' ? uploadResult : ''
|
||||
)
|
||||
},
|
||||
onUploadSuccess(data, index, list) {
|
||||
let parsedData = data
|
||||
if (typeof data === 'string') {
|
||||
try {
|
||||
parsedData = JSON.parse(data)
|
||||
} catch (error) {}
|
||||
}
|
||||
const resourceUrl = this.resolveUploadedFileUrl(parsedData)
|
||||
if (!resourceUrl) {
|
||||
return
|
||||
}
|
||||
this.form.photos = Array.isArray(list) ? list : this.form.photos
|
||||
this.form.imageUrls.splice(index, 1, resourceUrl)
|
||||
},
|
||||
onPhotoListChange(list) {
|
||||
this.form.photos = Array.isArray(list) ? list : []
|
||||
},
|
||||
onRemoveImage(index) {
|
||||
this.form.imageUrls.splice(index, 1)
|
||||
},
|
||||
onUploadError() {
|
||||
uni.showToast({ title: this.t('uploadFailed'), icon: 'none' })
|
||||
},
|
||||
onUploadOversize() {
|
||||
uni.showToast({ title: this.t('uploadOversize'), icon: 'none' })
|
||||
},
|
||||
onUploadExceed() {
|
||||
uni.showToast({ title: this.t('uploadExceed'), icon: 'none' })
|
||||
},
|
||||
getValidationMessage() {
|
||||
if (!String(this.form.itemType || '').trim()) return this.t('validateItemType')
|
||||
if (!String(this.form.itemName || '').trim()) return this.t('validateItemName')
|
||||
if (!String(this.form.place || '').trim()) return this.t('validatePlace')
|
||||
if (!String(this.form.contract || '').trim()) return this.t('validateContract')
|
||||
if (!String(this.form.contractPhone || '').trim()) return this.t('validateContractPhone')
|
||||
return ''
|
||||
},
|
||||
buildSubmitPayload() {
|
||||
return {
|
||||
type: Number(this.form.type) || 1,
|
||||
itemType: String(this.form.itemType || '').trim(),
|
||||
itemName: String(this.form.itemName || '').trim(),
|
||||
place: String(this.form.place || '').trim(),
|
||||
when: this.resolveWhenValue(),
|
||||
contract: String(this.form.contract || '').trim(),
|
||||
contractPhone: String(this.form.contractPhone || '').trim(),
|
||||
remark: String(this.form.remark || '').trim() || null,
|
||||
imageUrls: this.form.imageUrls.length ? this.form.imageUrls.slice() : null
|
||||
}
|
||||
},
|
||||
resetForm() {
|
||||
this.uploadInstanceKey += 1
|
||||
this.form = this.createDefaultForm()
|
||||
this.prefillContact()
|
||||
},
|
||||
submitForm() {
|
||||
if (this.isSubmitting) {
|
||||
return
|
||||
}
|
||||
const validationMessage = this.getValidationMessage()
|
||||
if (validationMessage) {
|
||||
uni.showToast({ title: validationMessage, icon: 'none' })
|
||||
return
|
||||
}
|
||||
this.isSubmitting = true
|
||||
lostAndFoundPublish(this.buildSubmitPayload(), this.language)
|
||||
.then(() => {
|
||||
uni.showToast({
|
||||
title: this.t('submitSuccess'),
|
||||
icon: 'success'
|
||||
})
|
||||
this.resetForm()
|
||||
setTimeout(() => {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
}, 600)
|
||||
})
|
||||
.catch((error) => {
|
||||
uni.showToast({
|
||||
title: (error && (error.message || error.msg)) || this.t('submitFailed'),
|
||||
icon: 'none'
|
||||
})
|
||||
})
|
||||
.finally(() => {
|
||||
this.isSubmitting = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.lost-found-page {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(180deg, #F0F6FF 0%, #F8FAFF 100%);
|
||||
}
|
||||
|
||||
.page-scroll {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.hero-header {
|
||||
padding: 24rpx 8rpx 0;
|
||||
}
|
||||
|
||||
.hero-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 10rpx 18rpx;
|
||||
background: rgba($brand-primary, 0.08);
|
||||
border-radius: 999rpx;
|
||||
color: $brand-primary;
|
||||
font-size: 22rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.badge-dot {
|
||||
width: 10rpx;
|
||||
height: 10rpx;
|
||||
border-radius: 50%;
|
||||
background: $brand-primary;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
margin-top: 22rpx;
|
||||
font-size: 52rpx;
|
||||
line-height: 1.2;
|
||||
color: #1A2233;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.hero-desc {
|
||||
margin-top: 16rpx;
|
||||
color: #6A7A99;
|
||||
font-size: 26rpx;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.form-card {
|
||||
background: #FFFFFF;
|
||||
border-radius: 28rpx;
|
||||
box-shadow: 0 12rpx 36rpx rgba(43, 142, 255, 0.06);
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.8);
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
.block-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: #1A2233;
|
||||
}
|
||||
|
||||
.block-subtitle {
|
||||
margin-top: 10rpx;
|
||||
font-size: 24rpx;
|
||||
color: #7C8AA5;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
margin-bottom: 16rpx;
|
||||
font-size: 28rpx;
|
||||
color: #1A2233;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.form-input,
|
||||
.form-picker,
|
||||
.form-textarea {
|
||||
width: 100%;
|
||||
background: #F8FAFF;
|
||||
border-radius: 22rpx;
|
||||
border: 1rpx solid rgba($brand-primary, 0.08);
|
||||
color: #1A2233;
|
||||
}
|
||||
|
||||
.form-input,
|
||||
.form-picker {
|
||||
min-height: 96rpx;
|
||||
padding: 0 26rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.form-textarea {
|
||||
min-height: 180rpx;
|
||||
padding: 26rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.picker-row {
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.picker-row picker {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.form-picker--time {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.field-tip {
|
||||
margin-top: 12rpx;
|
||||
font-size: 22rpx;
|
||||
color: #8A97AE;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.field-counter {
|
||||
margin-top: 12rpx;
|
||||
text-align: right;
|
||||
font-size: 22rpx;
|
||||
color: #9AA6BC;
|
||||
}
|
||||
|
||||
.upload-trigger {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
border-radius: 22rpx;
|
||||
background: linear-gradient(135deg, rgba($brand-primary, 0.08) 0%, rgba($brand-primary, 0.03) 100%);
|
||||
border: 1rpx dashed rgba($brand-primary, 0.26);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.upload-trigger__icon {
|
||||
font-size: 40rpx;
|
||||
color: $brand-primary;
|
||||
}
|
||||
|
||||
.upload-trigger__text {
|
||||
margin-top: 12rpx;
|
||||
font-size: 24rpx;
|
||||
color: $brand-primary;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.floating-submit-bar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 24rpx 24rpx calc(24rpx + env(safe-area-inset-bottom));
|
||||
background: linear-gradient(180deg, rgba(248, 250, 255, 0) 0%, rgba(248, 250, 255, 0.98) 36%, rgba(248, 250, 255, 1) 100%);
|
||||
}
|
||||
|
||||
.floating-submit-bar__inner {
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
border-radius: 28rpx;
|
||||
padding: 22rpx;
|
||||
box-shadow: 0 12rpx 36rpx rgba(43, 142, 255, 0.08);
|
||||
}
|
||||
|
||||
.floating-submit-tip {
|
||||
margin-bottom: 16rpx;
|
||||
font-size: 22rpx;
|
||||
color: #7C8AA5;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
height: 96rpx;
|
||||
border-radius: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, rgba($brand-primary, 0.92) 0%, $brand-primary 100%);
|
||||
color: #FFFFFF;
|
||||
box-shadow: 0 12rpx 28rpx rgba($brand-primary, 0.24);
|
||||
}
|
||||
|
||||
.submit-btn--disabled {
|
||||
opacity: 0.7;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user