You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
135 lines
2.8 KiB
135 lines
2.8 KiB
<template> |
|
<view class="view"> |
|
<view |
|
class="input-wrapper" |
|
style=" |
|
background-color: #f9f9f9; |
|
border: 1px solid #f1f1f4; |
|
border-radius: 24rpx; |
|
padding: 16rpx; |
|
height: 400rpx; |
|
position: relative; |
|
" |
|
@tap="focusInput" |
|
> |
|
<uni-easyinput |
|
ref="easyInput" |
|
type="textarea" |
|
v-model="introduce" |
|
placeholder="请输入..." |
|
placeholderStyle="font-size:28rpx" |
|
:maxlength="500" |
|
:input-border="false" |
|
:adjust-position="true" |
|
:autoHeight="true" |
|
cursorSpacing="32" |
|
@blur="textAreaFocus = false" |
|
:focus="textAreaFocus" |
|
:styles="{ |
|
backgroundColor: 'transparent', |
|
borderColor: 'none', |
|
height: '360rpx' |
|
}" |
|
></uni-easyinput> |
|
<view class="word-count">{{ introduce.length }}/500</view> |
|
</view> |
|
<cs-bottom-wrapper> |
|
<view class="operation"> |
|
<button class="btn green" @tap="submit">保存</button> |
|
</view> |
|
</cs-bottom-wrapper> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
export default { |
|
data() { |
|
return { |
|
introduce: '', |
|
textAreaFocus: false |
|
} |
|
}, |
|
onLoad(res) { |
|
this.introduce = res.introduce |
|
}, |
|
methods: { |
|
// 聚焦输入框 |
|
focusInput() { |
|
if (this.$refs.easyInput) { |
|
this.textAreaFocus = false // 先重置焦点状态 |
|
this.$nextTick(() => { |
|
this.textAreaFocus = true // 在下一个时序重新设置焦点 |
|
}) |
|
} else { |
|
console.warn('输入框组件未注册') |
|
} |
|
}, |
|
submit() { |
|
if (!this.introduce) { |
|
uni.showToast({ |
|
icon: 'none', |
|
title: '请填写介绍' |
|
}) |
|
return |
|
} |
|
uni.$emit('enterpriseIntroduce', { introduce: this.introduce }) |
|
uni.navigateBack() |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.view { |
|
background-color: #fff; |
|
padding: 12px; |
|
height: 100vh; |
|
} |
|
::v-deep .u-textarea { |
|
min-height: 400rpx; |
|
height: 400rpx; |
|
background-color: #f9f9f9 !important; |
|
border: 1px solid #f9f9f9; |
|
border-radius: 12px; |
|
margin: 0; |
|
.u-textarea__count { |
|
background-color: #f9f9f9 !important; |
|
} |
|
} |
|
.input-wrapper { |
|
min-height: 400rpx; |
|
height: auto !important; |
|
transition: height 0.3s ease; |
|
} |
|
|
|
.operation { |
|
padding: 12px; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
gap: 12px; |
|
.btn { |
|
flex: 1; |
|
border-radius: 8px; |
|
display: flex; |
|
padding: 12px 0; |
|
align-items: center; |
|
justify-content: center; |
|
} |
|
.green { |
|
background-color: $cs-color-main; |
|
color: #fff; |
|
} |
|
} |
|
.word-count { |
|
position: absolute; |
|
bottom: 0; |
|
right: 16rpx; |
|
color: #78829d; |
|
font-size: 24rpx; |
|
background-color: #f9f9f9; |
|
padding: 4rpx 8rpx; |
|
transform: translateY(100%); |
|
margin-bottom: 40rpx; |
|
} |
|
</style>
|
|
|