|
|
|
@ -5,9 +5,9 @@ |
|
|
|
<view class="xjTitle">填写信息</view> |
|
|
|
<view class="xjTips">请您填写相关问题</view> |
|
|
|
<view class="conItem"> |
|
|
|
<u--form labelPosition="left" :model="userInfo" ref="uForm"> |
|
|
|
<u-form labelPosition="left" :rules="rules" :model="userInfo" ref="uForm"> |
|
|
|
|
|
|
|
<u-form-item labelAlign="right" labelWidth="100px" label="乐业社区" prop="userInfo.sex" borderBottom |
|
|
|
<u-form-item labelAlign="right" labelWidth="100px" label="乐业社区" prop="sex" borderBottom |
|
|
|
@click="lysqShow = true; hideKeyboard()" ref="item1"> |
|
|
|
<u--input v-model="userInfo.sex" disabled disabledColor="#ffffff" placeholder="请选择" border="none"></u--input> |
|
|
|
<u-icon slot="right" name="arrow-right"></u-icon> |
|
|
|
@ -26,9 +26,31 @@ |
|
|
|
<u-form-item labelAlign="right" labelWidth="100px" label="问题描述" prop="userInfo.sex" borderBottom ref="item1"> |
|
|
|
<u--textarea v-model="userInfo.sex" placeholder="请输入内容" count maxlength="500"></u--textarea> |
|
|
|
</u-form-item> |
|
|
|
<u-form-item labelAlign="right" labelWidth="120px" label="上传图片/视频" prop="userInfo.sex" borderBottom ref="item1"> |
|
|
|
<u-upload |
|
|
|
v-model="fileList" |
|
|
|
:max-count="10" |
|
|
|
:multiple="true" |
|
|
|
:preview-full-image="true" |
|
|
|
:deletable="true" |
|
|
|
:show-upload-list="true" |
|
|
|
:file-list="fileList" |
|
|
|
accept="image" |
|
|
|
@after-read="afterRead" |
|
|
|
@delete="onDelete" |
|
|
|
> |
|
|
|
<view class="custom-upload-btn"> |
|
|
|
<view class="icon-box"> |
|
|
|
<image class="camera-icon" src="/static/img/camera-icon.png" mode="aspectFill"></image> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="upload-tips">点击上传</view> |
|
|
|
</view> |
|
|
|
</u-upload> |
|
|
|
</u-form-item> |
|
|
|
|
|
|
|
|
|
|
|
</u--form> |
|
|
|
</u-form> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="conItem" style="margin-top: 40rpx;"> |
|
|
|
@ -72,16 +94,34 @@ export default { |
|
|
|
name: '', |
|
|
|
phone: '', |
|
|
|
}, |
|
|
|
rules:{ |
|
|
|
sex:[ |
|
|
|
{ required: true, message: '请输入', trigger: 'blur' } |
|
|
|
] |
|
|
|
}, |
|
|
|
radio: '', |
|
|
|
switchVal: false, |
|
|
|
fileList: [], |
|
|
|
} |
|
|
|
}, |
|
|
|
onLoad () { |
|
|
|
|
|
|
|
}, |
|
|
|
methods: { |
|
|
|
afterRead(event) { |
|
|
|
let files = Array.isArray(event) ? event : [event] |
|
|
|
this.fileList = this.fileList.concat(files) |
|
|
|
}, |
|
|
|
onDelete(event) { |
|
|
|
this.fileList.splice(event.index, 1) |
|
|
|
}, |
|
|
|
handleBtn () { |
|
|
|
this.$refs['uForm'].validate((valid) => { |
|
|
|
if (valid) { |
|
|
|
console.log(this.userInfo); |
|
|
|
|
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
sexSelect (e) { |
|
|
|
this.model1.userInfo.sex = e.name |
|
|
|
@ -148,4 +188,47 @@ export default { |
|
|
|
margin: auto; |
|
|
|
margin-top: 40rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.custom-upload-btn { |
|
|
|
width: 160rpx; |
|
|
|
height: 160rpx; |
|
|
|
background: #fafafa; |
|
|
|
border: 2rpx solid #f0f0f0; |
|
|
|
border-radius: 16rpx; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
margin: 20rpx 16rpx 0 0; |
|
|
|
} |
|
|
|
.icon-box{ |
|
|
|
width: 60rpx; |
|
|
|
height: 60rpx; |
|
|
|
background: #ceeced; |
|
|
|
border-radius: 50%; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
} |
|
|
|
.camera-icon{ |
|
|
|
width: 36rpx; |
|
|
|
height: 36rpx; |
|
|
|
} |
|
|
|
.upload-tips { |
|
|
|
color: #bbb; |
|
|
|
font-size: 24rpx; |
|
|
|
margin-top: 8rpx; |
|
|
|
} |
|
|
|
.u-upload__wrap { |
|
|
|
display: flex; |
|
|
|
flex-wrap: wrap; |
|
|
|
align-items: center; |
|
|
|
margin-top: 20rpx; |
|
|
|
} |
|
|
|
.u-upload__preview { |
|
|
|
border-radius: 16rpx; |
|
|
|
overflow: hidden; |
|
|
|
margin-right: 16rpx; |
|
|
|
margin-bottom: 16rpx; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
fp
1 month ago
