497 lines
12 KiB
Vue
497 lines
12 KiB
Vue
|
<template>
|
|||
|
|
<view class="page">
|
|||
|
|
<app-top-push-notice />
|
|||
|
|
<view class="tabback">
|
|||
|
|
<view class="rtjt" @click="back">←</view>
|
|||
|
|
<view class="name">{{ $i18n.t('companyApplyTitle') }}</view>
|
|||
|
|
<view class="tabback-placeholder"></view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<scroll-view scroll-y class="form-scroll" :show-scrollbar="false">
|
|||
|
|
<view class="form">
|
|||
|
|
<!-- logo -->
|
|||
|
|
<view class="field">
|
|||
|
|
<text class="label">{{ $i18n.t('companyFieldLogo') }}</text>
|
|||
|
|
<view class="logo-box" @click="openSheet">
|
|||
|
|
<image v-if="logo" class="logo-img" :src="logo" mode="aspectFill" />
|
|||
|
|
<text v-else class="logo-placeholder">{{ $i18n.t('companyTapUploadLogo') }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="field">
|
|||
|
|
<text class="label">{{ $i18n.t('companyFieldName') }}</text>
|
|||
|
|
<input
|
|||
|
|
class="input"
|
|||
|
|
v-model="name"
|
|||
|
|
:placeholder="$i18n.t('companyFieldNamePlaceholder')"
|
|||
|
|
placeholder-style="color:#BFBFBF"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="field">
|
|||
|
|
<text class="label">{{ $i18n.t('companyFieldType') }}</text>
|
|||
|
|
<picker mode="selector" :range="typeLabels" :value="typeIndex" @change="onTypeChange">
|
|||
|
|
<view class="picker-val">{{ typeLabels[typeIndex] }}</view>
|
|||
|
|
</picker>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="field">
|
|||
|
|
<text class="label">{{ $i18n.t('companyFieldDescription') }}</text>
|
|||
|
|
<textarea
|
|||
|
|
class="textarea"
|
|||
|
|
v-model="description"
|
|||
|
|
:placeholder="$i18n.t('companyFieldDescriptionPlaceholder')"
|
|||
|
|
placeholder-style="color:#BFBFBF"
|
|||
|
|
auto-height
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="field">
|
|||
|
|
<text class="label">{{ $i18n.t('companyFieldEmail') }}</text>
|
|||
|
|
<input
|
|||
|
|
class="input"
|
|||
|
|
v-model="email"
|
|||
|
|
type="text"
|
|||
|
|
:placeholder="$i18n.t('companyFieldEmailPlaceholder')"
|
|||
|
|
placeholder-style="color:#BFBFBF"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="field">
|
|||
|
|
<text class="label">{{ $i18n.t('companyFieldWebsite') }}</text>
|
|||
|
|
<input
|
|||
|
|
class="input"
|
|||
|
|
v-model="website"
|
|||
|
|
:placeholder="$i18n.t('companyFieldWebsitePlaceholder')"
|
|||
|
|
placeholder-style="color:#BFBFBF"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="field">
|
|||
|
|
<text class="label">{{ $i18n.t('companyFieldPhoneCode') }}</text>
|
|||
|
|
<picker mode="selector" :range="phoneCodeLabels" :value="phoneCodeIndex" @change="onPhoneCodeChange">
|
|||
|
|
<view class="picker-val">{{ phoneCodeLabels[phoneCodeIndex] }}</view>
|
|||
|
|
</picker>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="field">
|
|||
|
|
<text class="label">{{ $i18n.t('companyFieldPhone') }}</text>
|
|||
|
|
<input
|
|||
|
|
class="input"
|
|||
|
|
v-model="phone"
|
|||
|
|
type="number"
|
|||
|
|
:placeholder="$i18n.t('companyFieldPhonePlaceholder')"
|
|||
|
|
placeholder-style="color:#BFBFBF"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</scroll-view>
|
|||
|
|
|
|||
|
|
<view class="submit-footer">
|
|||
|
|
<view class="submit-btn" :class="{ disabled: submitting }" @click="submit">{{ $i18n.t('companyApplySubmit') }}</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="action-sheet" v-if="showActionSheet" @click="hideActionSheet">
|
|||
|
|
<view class="action-sheet-content" @click.stop>
|
|||
|
|
<view class="action-sheet-item" @click="takePhoto">
|
|||
|
|
<text class="action-sheet-text">{{ $i18n.t('takePhoto') }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="action-sheet-item" @click="chooseFromAlbum">
|
|||
|
|
<text class="action-sheet-text">{{ $i18n.t('chooseFromAlbum') }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="action-sheet-cancel" @click="hideActionSheet">
|
|||
|
|
<text class="action-sheet-text">{{ $i18n.t('actionSheetCancel') }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
const TYPE_OPTS = () => [
|
|||
|
|
{ value: 1, labelKey: 'companyTypeSecurity' },
|
|||
|
|
{ value: 2, labelKey: 'companyTypeInstall' }
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
const PHONE_CODES = () => [
|
|||
|
|
{ code: '+86', regionKey: 'regionCN' },
|
|||
|
|
{ code: '+852', regionKey: 'regionHK' },
|
|||
|
|
{ code: '+853', regionKey: 'regionMO' },
|
|||
|
|
{ code: '+886', regionKey: 'regionTW' },
|
|||
|
|
{ code: '+81', regionKey: 'regionJP' },
|
|||
|
|
{ code: '+82', regionKey: 'regionKorea' },
|
|||
|
|
{ code: '+1', regionKey: 'regionUS' },
|
|||
|
|
{ code: '+1', regionKey: 'regionCA' },
|
|||
|
|
{ code: '+44', regionKey: 'regionGB' },
|
|||
|
|
{ code: '+7', regionKey: 'regionRU' },
|
|||
|
|
{ code: '+65', regionKey: 'regionSG' },
|
|||
|
|
{ code: '+61', regionKey: 'regionAU' },
|
|||
|
|
{ code: '+49', regionKey: 'regionDE' },
|
|||
|
|
{ code: '+33', regionKey: 'regionFR' },
|
|||
|
|
{ code: '+39', regionKey: 'regionIT' },
|
|||
|
|
{ code: '+34', regionKey: 'regionES' }
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
logo: '',
|
|||
|
|
name: '',
|
|||
|
|
description: '',
|
|||
|
|
email: '',
|
|||
|
|
website: '',
|
|||
|
|
phone: '',
|
|||
|
|
typeIndex: 0,
|
|||
|
|
phoneCodeIndex: 0,
|
|||
|
|
typeOptions: TYPE_OPTS(),
|
|||
|
|
phoneCodes: PHONE_CODES(),
|
|||
|
|
qiniuToken: '',
|
|||
|
|
showActionSheet: false,
|
|||
|
|
submitting: false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
typeLabels() {
|
|||
|
|
const t = this.$i18n.t.bind(this.$i18n)
|
|||
|
|
return this.typeOptions.map((o) => t(o.labelKey))
|
|||
|
|
},
|
|||
|
|
phoneCodeLabels() {
|
|||
|
|
const t = this.$i18n.t.bind(this.$i18n)
|
|||
|
|
const lang = this.$i18n.getCurrentLanguage && this.$i18n.getCurrentLanguage()
|
|||
|
|
return this.phoneCodes.map((p) => {
|
|||
|
|
let region = t(p.regionKey)
|
|||
|
|
// 日语下韩国名称使用 Unicode，避免 ja 语言包该行编码异常
|
|||
|
|
if (p.regionKey === 'regionKorea' && lang === 'ja') {
|
|||
|
|
region = '\u97d3\u56fd'
|
|||
|
|
}
|
|||
|
|
return `${p.code} ${region}`
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad() {
|
|||
|
|
this.getQiniuToken()
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
back() {
|
|||
|
|
uni.navigateBack({ delta: 1 })
|
|||
|
|
},
|
|||
|
|
onTypeChange(e) {
|
|||
|
|
const i = Number(e.detail.value)
|
|||
|
|
if (!Number.isNaN(i)) this.typeIndex = i
|
|||
|
|
},
|
|||
|
|
onPhoneCodeChange(e) {
|
|||
|
|
const i = Number(e.detail.value)
|
|||
|
|
if (!Number.isNaN(i)) this.phoneCodeIndex = i
|
|||
|
|
},
|
|||
|
|
openSheet() {
|
|||
|
|
this.showActionSheet = true
|
|||
|
|
},
|
|||
|
|
hideActionSheet() {
|
|||
|
|
this.showActionSheet = false
|
|||
|
|
},
|
|||
|
|
generateGuid(length) {
|
|||
|
|
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
|
|||
|
|
let result = ''
|
|||
|
|
for (let i = 0; i < length; i++) {
|
|||
|
|
result += chars.charAt(Math.floor(Math.random() * chars.length))
|
|||
|
|
}
|
|||
|
|
return result
|
|||
|
|
},
|
|||
|
|
getQiniuToken() {
|
|||
|
|
this.$http.get('/common/qiniuToken').then((res) => {
|
|||
|
|
if (res.code == 200) {
|
|||
|
|
this.qiniuToken = res.data
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
uploadPath(tempPath) {
|
|||
|
|
if (!this.qiniuToken) {
|
|||
|
|
uni.showToast({ title: this.$i18n.t('uploadFailed'), icon: 'none' })
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
const math = 'static/' + this.generateGuid(20)
|
|||
|
|
uni.uploadFile({
|
|||
|
|
url: 'https://up-z2.qiniup.com',
|
|||
|
|
name: 'file',
|
|||
|
|
filePath: tempPath,
|
|||
|
|
formData: {
|
|||
|
|
token: this.qiniuToken,
|
|||
|
|
key: 'smartmeter/img/' + math
|
|||
|
|
},
|
|||
|
|
success: (res) => {
|
|||
|
|
try {
|
|||
|
|
const str = JSON.parse(res.data)
|
|||
|
|
this.logo = 'https://api.ccttiot.com/' + str.key
|
|||
|
|
uni.showToast({ title: this.$i18n.t('imageSelectedSuccess'), icon: 'success' })
|
|||
|
|
} catch (err) {
|
|||
|
|
uni.showToast({ title: this.$i18n.t('uploadFailed'), icon: 'none' })
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
fail: () => {
|
|||
|
|
uni.showToast({ title: this.$i18n.t('uploadFailed'), icon: 'none' })
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
takePhoto() {
|
|||
|
|
this.hideActionSheet()
|
|||
|
|
uni.chooseImage({
|
|||
|
|
count: 1,
|
|||
|
|
sizeType: ['compressed'],
|
|||
|
|
sourceType: ['camera'],
|
|||
|
|
success: (imgRes) => {
|
|||
|
|
this.uploadPath(imgRes.tempFilePaths[0])
|
|||
|
|
},
|
|||
|
|
fail: () => {
|
|||
|
|
uni.showToast({ title: this.$i18n.t('imageOperationCancelled'), icon: 'none' })
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
chooseFromAlbum() {
|
|||
|
|
this.hideActionSheet()
|
|||
|
|
uni.chooseImage({
|
|||
|
|
count: 1,
|
|||
|
|
sizeType: ['compressed'],
|
|||
|
|
sourceType: ['album'],
|
|||
|
|
success: (imgRes) => {
|
|||
|
|
this.uploadPath(imgRes.tempFilePaths[0])
|
|||
|
|
},
|
|||
|
|
fail: () => {
|
|||
|
|
uni.showToast({ title: this.$i18n.t('imageOperationCancelled'), icon: 'none' })
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
submit() {
|
|||
|
|
if (this.submitting) return
|
|||
|
|
const name = (this.name || '').trim()
|
|||
|
|
if (!name) {
|
|||
|
|
uni.showToast({ title: this.$i18n.t('companyPleaseName'), icon: 'none' })
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
if (!this.logo) {
|
|||
|
|
uni.showToast({ title: this.$i18n.t('companyPleaseLogo'), icon: 'none' })
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
const email = (this.email || '').trim()
|
|||
|
|
if (email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
|
|||
|
|
uni.showToast({ title: this.$i18n.t('companyEmailInvalid'), icon: 'none' })
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
const type = this.typeOptions[this.typeIndex].value
|
|||
|
|
const phoneCode = this.phoneCodes[this.phoneCodeIndex].code
|
|||
|
|
const payload = {
|
|||
|
|
logo: this.logo,
|
|||
|
|
name,
|
|||
|
|
type,
|
|||
|
|
description: (this.description || '').trim(),
|
|||
|
|
email,
|
|||
|
|
website: (this.website || '').trim(),
|
|||
|
|
phoneCode,
|
|||
|
|
phone: (this.phone || '').trim()
|
|||
|
|
}
|
|||
|
|
this.submitting = true
|
|||
|
|
this.$http
|
|||
|
|
.post('/bst/company', payload)
|
|||
|
|
.then((res) => {
|
|||
|
|
if (res.code == 200) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: res.msg || this.$i18n.t('companyApplySuccess'),
|
|||
|
|
icon: 'success'
|
|||
|
|
})
|
|||
|
|
setTimeout(() => {
|
|||
|
|
uni.navigateBack({ delta: 1 })
|
|||
|
|
}, 1500)
|
|||
|
|
} else {
|
|||
|
|
uni.showToast({ title: res.msg || this.$i18n.t('requestFailed'), icon: 'none' })
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
.catch(() => {
|
|||
|
|
uni.showToast({ title: this.$i18n.t('requestFailed'), icon: 'none' })
|
|||
|
|
})
|
|||
|
|
.finally(() => {
|
|||
|
|
this.submitting = false
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.page {
|
|||
|
|
min-height: 100vh;
|
|||
|
|
background-color: #f3f5f6;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tabback {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 160rpx;
|
|||
|
|
padding: 0 20rpx;
|
|||
|
|
padding-top: 80rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
position: fixed;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
z-index: 999;
|
|||
|
|
background-color: #fff;
|
|||
|
|
|
|||
|
|
.rtjt {
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
color: #333;
|
|||
|
|
min-width: 48rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.name {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tabback-placeholder {
|
|||
|
|
width: 48rpx;
|
|||
|
|
height: 1rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-scroll {
|
|||
|
|
height: calc(100vh - 160rpx);
|
|||
|
|
margin-top: 160rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form {
|
|||
|
|
padding: 24rpx;
|
|||
|
|
/* 为底部固定按钮留出可滚动空间（按钮区约 96+40+40rpx + 安全区） */
|
|||
|
|
padding-bottom: calc(200rpx + env(safe-area-inset-bottom));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.field {
|
|||
|
|
margin-bottom: 28rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.label {
|
|||
|
|
display: block;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: #5c6370;
|
|||
|
|
margin-bottom: 12rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.logo-box {
|
|||
|
|
width: 200rpx;
|
|||
|
|
height: 200rpx;
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
background: #fff;
|
|||
|
|
border: 2rpx dashed #d0d4dc;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.logo-img {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.logo-placeholder {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #8b9199;
|
|||
|
|
padding: 16rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.input {
|
|||
|
|
background: #fff;
|
|||
|
|
border-radius: 12rpx;
|
|||
|
|
padding: 24rpx 28rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #1a1a1a;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.textarea {
|
|||
|
|
background: #fff;
|
|||
|
|
border-radius: 12rpx;
|
|||
|
|
padding: 24rpx 28rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #1a1a1a;
|
|||
|
|
min-height: 160rpx;
|
|||
|
|
width: 100%;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.picker-val {
|
|||
|
|
background: #fff;
|
|||
|
|
border-radius: 12rpx;
|
|||
|
|
padding: 24rpx 28rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #1a1a1a;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.submit-footer {
|
|||
|
|
position: fixed;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
z-index: 998;
|
|||
|
|
padding: 20rpx 24rpx calc(20rpx + env(safe-area-inset-bottom));
|
|||
|
|
background-color: #fff;
|
|||
|
|
box-shadow: 0 -4rpx 24rpx rgba(0, 0, 0, 0.06);
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.submit-btn {
|
|||
|
|
height: 96rpx;
|
|||
|
|
line-height: 96rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
background: #0f0f0f;
|
|||
|
|
color: #fff;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
font-weight: 600;
|
|||
|
|
border-radius: 48rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.submit-btn.disabled {
|
|||
|
|
opacity: 0.5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-sheet {
|
|||
|
|
position: fixed;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|||
|
|
z-index: 9999;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: flex-end;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-sheet-content {
|
|||
|
|
width: 100%;
|
|||
|
|
background-color: #fff;
|
|||
|
|
border-radius: 20rpx 20rpx 0 0;
|
|||
|
|
padding-bottom: 40rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-sheet-item {
|
|||
|
|
padding: 30rpx 40rpx;
|
|||
|
|
border-bottom: 1rpx solid #f0f0f0;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-sheet-cancel {
|
|||
|
|
padding: 30rpx 40rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
background-color: #f8f8f8;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-sheet-text {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
</style>
|