877 lines
20 KiB
Vue
877 lines
20 KiB
Vue
<template>
|
||
<view class="page">
|
||
<u-navbar title="新增语音" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
|
||
title-size='36' height='36' id="navbar">
|
||
</u-navbar>
|
||
|
||
<scroll-view class="form-container" scroll-y>
|
||
<view class="form-card">
|
||
<view class="form-item">
|
||
<view class="form-label">
|
||
<text class="label-text">语音文件</text>
|
||
<text class="required">*</text>
|
||
</view>
|
||
<view class="upload-box" @click="!fileUrl && uploadFile()">
|
||
<view v-if="!fileUrl" class="upload-placeholder">
|
||
<u-icon name="plus-circle" color="#3996FD" size="64"></u-icon>
|
||
<text class="upload-tip">点击上传MP3文件</text>
|
||
</view>
|
||
<!-- 上传后仅展示：删除 + 播放 + 进度条 + 时间，同一行对齐 -->
|
||
<view v-else class="audio-bar">
|
||
<view class="audio-remove" @click.stop="removeFile">
|
||
<u-icon name="close-circle-fill" color="#ff4444" size="36"></u-icon>
|
||
</view>
|
||
<view class="audio-play-btn" @click="togglePreviewPlay">
|
||
<u-icon
|
||
:name="previewPlaying ? 'pause-circle-fill' : 'play-circle-fill'"
|
||
:color="previewPlaying ? '#64B6A7' : '#3996FD'"
|
||
size="52"
|
||
></u-icon>
|
||
</view>
|
||
<view class="audio-progress-wrap">
|
||
<slider
|
||
class="audio-slider"
|
||
:value="previewProgress"
|
||
:min="0"
|
||
:max="100"
|
||
:step="0.1"
|
||
activeColor="#3996FD"
|
||
backgroundColor="#E5E7EB"
|
||
@change="onPreviewSeek"
|
||
@changing="onPreviewSeekChanging"
|
||
/>
|
||
<view class="audio-time">
|
||
<text>{{ formatTime(previewCurrentTime) }}</text>
|
||
<text>/ {{ formatTime(previewDuration) }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="form-tip">仅支持MP3格式文件</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="form-card">
|
||
<view class="form-item">
|
||
<view class="form-label">
|
||
<text class="label-text">语音编号</text>
|
||
<text class="required">*</text>
|
||
</view>
|
||
<view class="picker-box" @click="openNoPicker">
|
||
<text :class="['picker-text', selectedNo ? '' : 'placeholder']">
|
||
{{ selectedNo || '请选择语音编号(11-40)' }}
|
||
</text>
|
||
<u-icon name="arrow-right" color="#C0C4CC" size="20"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="form-card">
|
||
<view class="form-item">
|
||
<view class="form-label">
|
||
<text class="label-text">备注</text>
|
||
<text class="label-tip">（可选）</text>
|
||
</view>
|
||
<textarea
|
||
class="form-textarea"
|
||
v-model="remark"
|
||
placeholder="请输入备注信息"
|
||
maxlength="200"
|
||
:auto-height="true"
|
||
></textarea>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<view class="submit-btn" @click="submit">
|
||
<text>提交</text>
|
||
</view>
|
||
|
||
<!-- 语音编号选择弹窗：居中、可滚动、点击选择 -->
|
||
<view class="no-picker-mask" v-if="showNoPicker" @click="closeNoPicker"></view>
|
||
<view class="no-picker-modal" v-if="showNoPicker" @click.stop="">
|
||
<view class="no-picker-title">选择语音编号</view>
|
||
<scroll-view class="no-picker-list" scroll-y>
|
||
<view
|
||
class="no-picker-item"
|
||
:class="{ active: selectedNo === item.label, disabled: isNoConfigured(item.label) }"
|
||
v-for="(item, idx) in noOptions"
|
||
:key="idx"
|
||
@click="selectNo(idx)"
|
||
>
|
||
<text>{{ item.label }}</text>
|
||
<view class="no-picker-right">
|
||
<text class="configured-tag" v-if="isNoConfigured(item.label)">已配置</text>
|
||
<u-icon v-else-if="selectedNo === item.label" name="checkmark" color="#3996FD" size="20"></u-icon>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
<view class="no-picker-cancel" @click="closeNoPicker">取消</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
bgc: {
|
||
backgroundColor: "#fff",
|
||
},
|
||
fileUrl: '',
|
||
fileName: '',
|
||
token: '',
|
||
upurl: '',
|
||
noOptions: [],
|
||
noIndex: -1,
|
||
selectedNo: '',
|
||
areaId: '',
|
||
remark: '',
|
||
showNoPicker: false,
|
||
configuredNoSet: {}, // 已配置编号集合（key 为 label 字符串）
|
||
// 语音预览
|
||
previewAudio: null,
|
||
previewPlaying: false,
|
||
previewProgress: 0,
|
||
previewCurrentTime: 0,
|
||
previewDuration: 0,
|
||
previewSeekChanging: false
|
||
}
|
||
},
|
||
onUnload() {
|
||
this.destroyPreviewAudio()
|
||
},
|
||
onLoad() {
|
||
this.initNoOptions()
|
||
this.getUserAreaId()
|
||
this.getQiniuToken()
|
||
},
|
||
methods: {
|
||
// 初始化编号选项 11-40
|
||
initNoOptions() {
|
||
for (let i = 11; i <= 40; i++) {
|
||
this.noOptions.push({
|
||
value: i,
|
||
label: i.toString()
|
||
})
|
||
}
|
||
},
|
||
// 获取用户运营区ID
|
||
getUserAreaId() {
|
||
// 优先从存储中获取
|
||
if (uni.getStorageSync('adminAreaid')) {
|
||
this.areaId = uni.getStorageSync('adminAreaid')
|
||
this.loadConfiguredNos()
|
||
return
|
||
}
|
||
// 从用户信息中获取
|
||
this.$u.get("/getInfo").then(res => {
|
||
if (res.code == 200 && res.user && res.user.areaId) {
|
||
this.areaId = res.user.areaId
|
||
this.loadConfiguredNos()
|
||
}
|
||
})
|
||
},
|
||
// 获取七牛云token
|
||
getQiniuToken() {
|
||
this.$u.get("/common/qiniuToken").then((res) => {
|
||
if (res.code == 200) {
|
||
this.token = res.data
|
||
this.upurl = res.domain
|
||
}
|
||
})
|
||
},
|
||
// 拉取当前运营区已配置的语音编号，用于弹窗置灰
|
||
loadConfiguredNos() {
|
||
if (!this.areaId) return
|
||
this.$u.get('/bst/voice/list?areaId=' + this.areaId).then(res => {
|
||
if (res.code != 200) return
|
||
const rows = Array.isArray(res.data) ? res.data : (res.rows || [])
|
||
const set = {}
|
||
rows.forEach(item => {
|
||
const no = item && (item.no != null ? String(item.no) : '')
|
||
if (no) set[no] = true
|
||
})
|
||
this.configuredNoSet = set
|
||
this.$forceUpdate()
|
||
}).catch(() => {})
|
||
},
|
||
isNoConfigured(label) {
|
||
return !!(this.configuredNoSet && this.configuredNoSet[String(label)])
|
||
},
|
||
// 语音编号弹窗
|
||
openNoPicker() {
|
||
if (this.areaId && (!this.configuredNoSet || Object.keys(this.configuredNoSet).length === 0)) {
|
||
this.loadConfiguredNos()
|
||
}
|
||
this.showNoPicker = true
|
||
},
|
||
closeNoPicker() {
|
||
this.showNoPicker = false
|
||
},
|
||
selectNo(index) {
|
||
const item = this.noOptions[index]
|
||
if (item && this.isNoConfigured(item.label)) {
|
||
uni.showToast({ title: '该编号已配置', icon: 'none' })
|
||
return
|
||
}
|
||
this.noIndex = index
|
||
this.selectedNo = this.noOptions[index].label
|
||
this.showNoPicker = false
|
||
},
|
||
// 上传文件
|
||
uploadFile() {
|
||
if (!this.token) {
|
||
uni.showToast({
|
||
title: '上传token获取失败，请重试',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
return
|
||
}
|
||
|
||
// #ifdef H5
|
||
// H5使用input选择文件
|
||
const input = document.createElement('input')
|
||
input.type = 'file'
|
||
input.accept = 'audio/mp3,audio/mpeg'
|
||
input.onchange = (e) => {
|
||
const file = e.target.files[0]
|
||
if (file) {
|
||
if (!file.name.toLowerCase().endsWith('.mp3')) {
|
||
uni.showToast({
|
||
title: '仅支持MP3格式文件',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
return
|
||
}
|
||
this.uploadToQiniu(file)
|
||
}
|
||
}
|
||
input.click()
|
||
// #endif
|
||
|
||
// #ifdef MP-WEIXIN
|
||
// 微信小程序使用wx.chooseMessageFile选择文件
|
||
wx.chooseMessageFile({
|
||
count: 1,
|
||
type: 'file',
|
||
success: (res) => {
|
||
const file = res.tempFiles[0]
|
||
if (file) {
|
||
// 检查文件类型
|
||
if (!file.name.toLowerCase().endsWith('.mp3')) {
|
||
uni.showToast({
|
||
title: '仅支持MP3格式文件',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
return
|
||
}
|
||
this.uploadToQiniu(file.path)
|
||
}
|
||
},
|
||
fail: (err) => {
|
||
console.log('选择文件失败', err)
|
||
uni.showToast({
|
||
title: '选择文件失败，请从聊天中选择文件',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
}
|
||
})
|
||
// #endif
|
||
|
||
// #ifndef H5 || MP-WEIXIN
|
||
// 其他平台（如APP）使用uni.chooseFile
|
||
// #ifdef APP-PLUS
|
||
uni.chooseFile({
|
||
count: 1,
|
||
type: 'file',
|
||
extension: ['.mp3'],
|
||
success: (res) => {
|
||
const file = res.tempFiles[0]
|
||
if (file) {
|
||
this.uploadToQiniu(file.path)
|
||
}
|
||
},
|
||
fail: (err) => {
|
||
console.log('选择文件失败', err)
|
||
uni.showToast({
|
||
title: '选择文件失败',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
}
|
||
})
|
||
// #endif
|
||
// #endif
|
||
},
|
||
// 上传到七牛云
|
||
uploadToQiniu(filePath) {
|
||
uni.showLoading({
|
||
title: '上传中...',
|
||
mask: true
|
||
})
|
||
|
||
let _this = this
|
||
let math = 'static/' + _this.$u.guid(20) + '.mp3'
|
||
|
||
// #ifdef H5
|
||
// H5需要先读取文件
|
||
const reader = new FileReader()
|
||
reader.onload = (e) => {
|
||
const blob = e.target.result
|
||
const formData = new FormData()
|
||
formData.append('file', blob)
|
||
formData.append('token', _this.token)
|
||
formData.append('key', 'bike/audio/' + math)
|
||
|
||
fetch('https://up-z2.qiniup.com', {
|
||
method: 'POST',
|
||
body: formData
|
||
}).then(res => res.json()).then(data => {
|
||
_this.destroyPreviewAudio()
|
||
_this.fileUrl = _this.upurl + '/' + data.key
|
||
_this.fileName = filePath.name || 'audio.mp3'
|
||
_this.preloadPreviewDuration()
|
||
uni.hideLoading()
|
||
uni.showToast({
|
||
title: '上传成功',
|
||
icon: 'success',
|
||
duration: 2000
|
||
})
|
||
}).catch(err => {
|
||
uni.hideLoading()
|
||
uni.showToast({
|
||
title: '上传失败',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
})
|
||
}
|
||
reader.readAsArrayBuffer(filePath)
|
||
// #endif
|
||
|
||
// #ifndef H5
|
||
wx.uploadFile({
|
||
url: 'https://up-z2.qiniup.com',
|
||
name: 'file',
|
||
filePath: filePath,
|
||
formData: {
|
||
token: _this.token,
|
||
key: 'bike/audio/' + math
|
||
},
|
||
success: function(res) {
|
||
try {
|
||
let str = JSON.parse(res.data)
|
||
_this.destroyPreviewAudio()
|
||
_this.fileUrl = _this.upurl + '/' + str.key
|
||
_this.fileName = 'audio.mp3'
|
||
_this.preloadPreviewDuration()
|
||
uni.hideLoading()
|
||
uni.showToast({
|
||
title: '上传成功',
|
||
icon: 'success',
|
||
duration: 2000
|
||
})
|
||
} catch(e) {
|
||
uni.hideLoading()
|
||
uni.showToast({
|
||
title: '上传失败',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
}
|
||
},
|
||
fail: function() {
|
||
uni.hideLoading()
|
||
uni.showToast({
|
||
title: '上传失败',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
}
|
||
})
|
||
// #endif
|
||
},
|
||
// 移除文件
|
||
removeFile() {
|
||
this.destroyPreviewAudio()
|
||
this.fileUrl = ''
|
||
this.fileName = ''
|
||
},
|
||
// 语音预览：播放/暂停
|
||
togglePreviewPlay() {
|
||
if (!this.fileUrl) return
|
||
if (this.previewPlaying) {
|
||
this.pausePreview()
|
||
} else {
|
||
this.playPreview()
|
||
}
|
||
},
|
||
playPreview() {
|
||
if (!this.fileUrl) return
|
||
if (this.previewAudio) {
|
||
this.previewAudio.play()
|
||
this.previewPlaying = true
|
||
return
|
||
}
|
||
const ctx = uni.createInnerAudioContext()
|
||
ctx.src = this.fileUrl
|
||
ctx.autoplay = false
|
||
ctx.onTimeUpdate(() => {
|
||
if (this.previewSeekChanging) return
|
||
this.previewCurrentTime = ctx.currentTime
|
||
this.previewDuration = ctx.duration || 0
|
||
if (ctx.duration > 0) {
|
||
this.previewProgress = (ctx.currentTime / ctx.duration) * 100
|
||
}
|
||
})
|
||
ctx.onEnded(() => {
|
||
this.previewPlaying = false
|
||
this.previewProgress = 0
|
||
this.previewCurrentTime = 0
|
||
})
|
||
ctx.onError(() => {
|
||
this.previewPlaying = false
|
||
uni.showToast({ title: '播放失败', icon: 'none' })
|
||
})
|
||
ctx.onCanplay(() => {
|
||
if (ctx.duration > 0) this.previewDuration = ctx.duration
|
||
})
|
||
ctx.play()
|
||
this.previewAudio = ctx
|
||
this.previewPlaying = true
|
||
},
|
||
pausePreview() {
|
||
if (this.previewAudio) {
|
||
this.previewAudio.pause()
|
||
this.previewPlaying = false
|
||
}
|
||
},
|
||
onPreviewSeekChanging(e) {
|
||
this.previewSeekChanging = true
|
||
},
|
||
onPreviewSeek(e) {
|
||
const p = Number(e.detail.value) || 0
|
||
this.previewSeekChanging = false
|
||
if (!this.previewAudio || !this.fileUrl) return
|
||
const duration = this.previewAudio.duration || this.previewDuration
|
||
if (duration <= 0) return
|
||
const seekTo = (p / 100) * duration
|
||
if (typeof this.previewAudio.seek === 'function') {
|
||
this.previewAudio.seek(seekTo)
|
||
}
|
||
this.previewCurrentTime = seekTo
|
||
this.previewProgress = p
|
||
},
|
||
formatTime(seconds) {
|
||
if (seconds == null || isNaN(seconds) || seconds < 0) return '00:00'
|
||
const s = Math.floor(seconds)
|
||
const m = Math.floor(s / 60)
|
||
const sec = s % 60
|
||
return `${String(m).padStart(2, '0')}:${String(sec).padStart(2, '0')}`
|
||
},
|
||
destroyPreviewAudio() {
|
||
if (this.previewAudio) {
|
||
this.previewAudio.stop()
|
||
this.previewAudio.destroy()
|
||
this.previewAudio = null
|
||
}
|
||
this.previewPlaying = false
|
||
this.previewProgress = 0
|
||
this.previewCurrentTime = 0
|
||
this.previewDuration = 0
|
||
},
|
||
// 上传成功后预加载音频以获取时长，便于下方显示
|
||
preloadPreviewDuration() {
|
||
if (!this.fileUrl) return
|
||
const ctx = uni.createInnerAudioContext()
|
||
ctx.src = this.fileUrl
|
||
ctx.autoplay = false
|
||
let done = false
|
||
const setDuration = () => {
|
||
if (done || !ctx.duration || ctx.duration <= 0) return
|
||
done = true
|
||
this.previewDuration = ctx.duration
|
||
this.$forceUpdate()
|
||
setTimeout(() => {
|
||
ctx.destroy()
|
||
}, 100)
|
||
}
|
||
ctx.onCanplay(setDuration)
|
||
ctx.onTimeUpdate(() => setDuration())
|
||
ctx.onError(() => {
|
||
if (!done) ctx.destroy()
|
||
})
|
||
setTimeout(() => {
|
||
if (!done) {
|
||
done = true
|
||
ctx.destroy()
|
||
}
|
||
}, 5000)
|
||
},
|
||
// 提交
|
||
submit() {
|
||
if (!this.fileUrl) {
|
||
uni.showToast({
|
||
title: '请上传语音文件',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
return
|
||
}
|
||
if (!this.selectedNo) {
|
||
uni.showToast({
|
||
title: '请选择语音编号',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
return
|
||
}
|
||
if (!this.areaId) {
|
||
uni.showToast({
|
||
title: '未获取到运营区信息',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
return
|
||
}
|
||
|
||
const data = {
|
||
fileUrl: this.fileUrl,
|
||
no: parseInt(this.selectedNo),
|
||
areaId: this.areaId,
|
||
remark: this.remark || ''
|
||
}
|
||
|
||
uni.showLoading({
|
||
title: '提交中...',
|
||
mask: true
|
||
})
|
||
|
||
this.$u.post('/bst/voice', data).then((res) => {
|
||
if (res.code == 200) {
|
||
uni.showToast({
|
||
title: '新增成功',
|
||
icon: 'success',
|
||
duration: 2000
|
||
})
|
||
setTimeout(() => {
|
||
uni.navigateBack()
|
||
}, 1500)
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg || '新增失败',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
}
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: '提交失败',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
}).finally(() => {
|
||
uni.hideLoading()
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background: #F7F7F7;
|
||
}
|
||
|
||
.page {
|
||
width: 100%;
|
||
min-height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 0 20rpx;
|
||
}
|
||
|
||
.form-container {
|
||
flex: 1;
|
||
padding-bottom: 140rpx;
|
||
}
|
||
|
||
.form-card {
|
||
background: #FFFFFF;
|
||
border-radius: 24rpx;
|
||
padding: 40rpx 32rpx;
|
||
margin-bottom: 24rpx;
|
||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
||
}
|
||
|
||
.form-item {
|
||
.form-label {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 24rpx;
|
||
padding-left: 8rpx;
|
||
position: relative;
|
||
|
||
&::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
width: 6rpx;
|
||
height: 28rpx;
|
||
border-radius: 3rpx;
|
||
}
|
||
|
||
.label-text {
|
||
font-size: 30rpx;
|
||
color: #333;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.required {
|
||
color: #FF4444;
|
||
margin-left: 8rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.label-tip {
|
||
font-size: 24rpx;
|
||
color: #909399;
|
||
margin-left: 8rpx;
|
||
font-weight: 400;
|
||
}
|
||
}
|
||
}
|
||
|
||
.upload-box {
|
||
width: 100%;
|
||
min-height: 200rpx;
|
||
background: #F5F7FA;
|
||
border: 3rpx dashed #D3D4D6;
|
||
border-radius: 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: all 0.3s ease;
|
||
|
||
&:active {
|
||
border-color: #3996FD;
|
||
background: #EFF6FF;
|
||
}
|
||
}
|
||
|
||
.upload-placeholder {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 20rpx;
|
||
padding: 40rpx;
|
||
|
||
.upload-tip {
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
|
||
/* 上传后仅展示：删除 + 播放 + 进度条 + 时间，同一行对齐 */
|
||
.audio-bar {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
gap: 20rpx;
|
||
padding: 28rpx 24rpx;
|
||
}
|
||
.audio-remove {
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
}
|
||
.audio-play-btn {
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 52rpx;
|
||
height: 52rpx;
|
||
margin-right:50rpx;
|
||
}
|
||
.audio-progress-wrap {
|
||
flex: 1;
|
||
min-width: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
}
|
||
.audio-slider {
|
||
width: 100%;
|
||
margin: 0;
|
||
}
|
||
.audio-time {
|
||
font-size: 22rpx;
|
||
color: #909399;
|
||
margin-top: 6rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8rpx;
|
||
margin-left: 50rpx;
|
||
}
|
||
|
||
.form-tip {
|
||
margin-top: 16rpx;
|
||
font-size: 24rpx;
|
||
color: #909399;
|
||
padding-left: 8rpx;
|
||
}
|
||
|
||
.picker-box {
|
||
width: 100%;
|
||
height: 96rpx;
|
||
background: #F5F7FA;
|
||
border: 2rpx solid transparent;
|
||
border-radius: 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 24rpx;
|
||
transition: all 0.3s;
|
||
|
||
&:active {
|
||
background: #FFFFFF;
|
||
border-color: #3996FD;
|
||
box-shadow: 0 0 0 4rpx rgba(57, 150, 253, 0.12);
|
||
}
|
||
|
||
.picker-text {
|
||
font-size: 30rpx;
|
||
color: #333;
|
||
font-weight: 500;
|
||
|
||
&.placeholder {
|
||
color: #C0C4CC;
|
||
}
|
||
}
|
||
}
|
||
|
||
.form-textarea {
|
||
width: 100%;
|
||
min-height: 160rpx;
|
||
padding: 24rpx;
|
||
background: #F5F7FA;
|
||
border: 2rpx solid transparent;
|
||
border-radius: 20rpx;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
box-sizing: border-box;
|
||
transition: all 0.3s;
|
||
|
||
&:focus {
|
||
background: #FFFFFF;
|
||
border-color: #3996FD;
|
||
box-shadow: 0 0 0 4rpx rgba(57, 150, 253, 0.12);
|
||
}
|
||
}
|
||
|
||
.submit-btn {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 100rpx;
|
||
background: linear-gradient(135deg, #3996FD 0%, #64B6A7 100%);
|
||
color: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 34rpx;
|
||
font-weight: 600;
|
||
z-index: 100;
|
||
box-shadow: 0 -4rpx 20rpx rgba(57, 150, 253, 0.25);
|
||
|
||
&::after {
|
||
border: none;
|
||
}
|
||
|
||
&:active {
|
||
opacity: 0.9;
|
||
}
|
||
}
|
||
|
||
/* 语音编号选择弹窗：居中、可滚动、点击选择 */
|
||
.no-picker-mask {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
z-index: 9998;
|
||
}
|
||
.no-picker-modal {
|
||
position: fixed;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 560rpx;
|
||
max-height: 70vh;
|
||
background: #fff;
|
||
border-radius: 24rpx;
|
||
overflow: hidden;
|
||
z-index: 9999;
|
||
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.15);
|
||
}
|
||
.no-picker-title {
|
||
text-align: center;
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
color: #262B37;
|
||
padding: 32rpx;
|
||
}
|
||
.no-picker-list {
|
||
max-height: 480rpx;
|
||
}
|
||
.no-picker-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 28rpx 32rpx;
|
||
font-size: 30rpx;
|
||
color: #333;
|
||
border-top: 1px solid #f3f1f1;
|
||
&.active {
|
||
color: #3996FD;
|
||
font-weight: 600;
|
||
background: #EFF6FF;
|
||
}
|
||
&.disabled {
|
||
color: #B0B0B0;
|
||
background: #F7F7F7;
|
||
}
|
||
}
|
||
.no-picker-right {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.configured-tag {
|
||
font-size: 22rpx;
|
||
color: #999;
|
||
padding: 6rpx 12rpx;
|
||
background: #EFEFEF;
|
||
border-radius: 999rpx;
|
||
}
|
||
.no-picker-cancel {
|
||
text-align: center;
|
||
font-size: 30rpx;
|
||
color: #999;
|
||
padding: 24rpx;
|
||
border-top: 1rpx solid #f0f0f0;
|
||
}
|
||
</style> |