移动端
 
 
 
 
 

243 lines
6.7 KiB

<template>
<view class="wrap">
<view class="form">
<u--form :model="form" ref="uForm" labelWidth="80">
<!-- 企业名称 -->
<u-form-item label="企业名称" prop="name" borderBottom>
<u-input v-model="form.name" border="none" placeholder="请输入" />
</u-form-item>
<!-- 企业类型 -->
<u-form-item label="企业类型" prop="type" borderBottom @tap="showType = true;">
<u--input v-model="form.type" placeholder="请选择" border="none"></u--input>
<u-icon slot="right" name="arrow-right"></u-icon>
</u-form-item>
<!-- 企业地址 -->
<u-form-item label="企业地址" prop="addr" borderBottom>
<u-input v-model="form.addr" border="none" placeholder="请输入" />
</u-form-item>
<!-- 企业简介 -->
<u-form-item label="企业简介" prop="info" borderBottom>
<u--textarea v-model="form.info" placeholder="请输入" border="none" count="true"></u--textarea>
</u-form-item>
<!-- 企业照片 -->
<u-form-item label="企业照片" borderBottom>
<u-upload :fileList="form.photo" @afterRead="addPhoto" @delete="delPhoto" multiple
:maxCount="6"></u-upload>
</u-form-item>
<!-- 环保负责人 -->
<u-form-item label="环保负责人" prop="manager" borderBottom>
<u-input v-model="form.manager" border="none" placeholder="请输入" />
</u-form-item>
<!-- 联系方式 -->
<u-form-item label="联系方式" prop="phone" borderBottom>
<u-input v-model="form.phone" border="none" placeholder="请输入" />
</u-form-item>
<!-- 成立时间 -->
<u-form-item label="成立时间" prop="regtime" borderBottom @tap="showRegtime = true">
<u-datetime-picker :show="showRegtime" v-model="defTime" mode="date" @confirm="regtime"
@cancel="showRegtime = false"></u-datetime-picker>
<u-input :value="form.regtime" border="none" placeholder="请输入" />
<u-icon slot="right" name="arrow-right"></u-icon>
</u-form-item>
<u-form-item label="zzlx" prop="hblicense" borderBottom labelPosition="top">
<u-input v-model="form.hblicense" border="none" placeholder="请输入" />
</u-form-item>
<u-form-item label="bh" prop="pwlicense" borderBottom labelPosition="top">
<u-input v-model="form.pwlicense" border="none" placeholder="请输入" />
</u-form-item>
<u-form-item label="bh" prop="pwlicense" borderBottom labelPosition="top">
<u-input v-model="form.pwlicense" border="none" placeholder="请输入" />
</u-form-item>
</u--form>
<!-- <view v-if='isEdit'>
<view class="" v-for="zz in zzlist" :key="zz.uid" @tap="edit(zz)">
<view class="">
<label for="">zzlx</label><text>{{zz.zzlx}}</text>
</view>
</view>
</view> -->
<!-- <u--form :model="zzform" v-else>
<u-form-item label="zzlx" prop="hblicense" borderBottom labelPosition="top">
<u-input v-model="form.hblicense" border="none" placeholder="请输入" />
</u-form-item>
<u-form-item label="bh" prop="pwlicense" borderBottom labelPosition="top">
<u-input v-model="form.pwlicense" border="none" placeholder="请输入" />
</u-form-item>
<u-form-item label="sj" prop="pwlicense" borderBottom labelPosition="top">
<u-input v-model="form.pwlicense" border="none" placeholder="请输入" />
</u-form-item>
<u-form-item>
<button @tap='savazz'>save</button>
</u-form-item>
</u--form> -->
<u-action-sheet :show="showType" :actions="types" title="请选择企业类型" @close="showType = false"
@select="typeSelect">
</u-action-sheet>
</view>
<u-button @tap="submit">提交</u-button>
</view>
</template>
<script>
export default {
data() {
return {
form: {
name: '', // 企业名称
type: '', // 企业类型
info: '', // 企业地址
addr: '', // 企业简介
photo: [], // 企业照片
manager: '', // 环保负责人
phone: '', // 联系方式
regtime: '', // 成立时间
hblicense: '', // 环保许可证
pwlicense: '', // 排污许可证
},
defTime: Number(new Date()), // 初始化日期
showType: false,
showRegtime: false,
types: [{
name: '小型',
},
{
name: '中型',
},
{
name: '大型',
},
],
rules: {
name: {
required: true,
message: '请输入企业名称',
trigger: ['blur']
},
type: {
type: 'string',
required: true,
message: '请选择企业类型',
trigger: ['blur']
},
info: {
type: 'string',
min: 3,
required: true,
message: '不低于3个字',
trigger: ['change']
},
addr: {
required: true,
message: '请输入企业地址',
trigger: ['blur']
},
manager: {
required: true,
message: '请输入环保负责人',
trigger: ['blur']
},
phone: {
required: true,
message: '请输入联系方式',
trigger: ['blur']
},
},
zzform: {},
zzList: [],
isEdit: false
}
},
methods: {
// 提交数据
submit() {
this.$refs.uForm.validate().then(res => {
uni.$u.toast('校验通过')
// 提交时上传照片
this.uploadPhoto(this.form.photo)
}).catch(errors => {
uni.$u.toast('校验失败')
})
},
// 企业成立时间
regtime(e) {
this.form.regtime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
this.showRegtime = false
},
// 选择企业类型
typeSelect(e) {
this.form.type = e.name
this.$refs.uForm.validateField('type')
},
// 新增图片
addPhoto(e) {
this.form.photo = e.file.map(item => {
return {
url: item.url
}
});
},
// 删除图片
delPhoto(e) {
this.form.photo.splice(e.index, 1);
},
// 提交时上传图片
async uploadPhoto(photo) {
// 遍历图片数组并上传每张图片
for (let i = 0; i < photo.length; i++) {
try {
// 获取每张图片的 URL
const url = photo[i].url;
const res = await uni.$u.http.upload('http://192.168.2.101:8080/api/common_file/upload', {
filePath: url,
name: 'file',
});
console.log(`照片 ${i + 1} 上传结果`, res);
} catch (err) {
console.log(`上传照片 ${i + 1} 失败`, err);
}
}
},
savazz() {
const data = this.zzform
data.uid = ''
this.zzList.push(data)
}
},
onReady() {
//如果需要兼容微信小程序,并且校验规则中含有方法等,只能通过setRules方法设置规则。
this.$refs.uForm.setRules(this.rules)
},
}
</script>
<style lang="scss">
.wrap {
background-color: #F9F9F9;
min-height: 100vh;
.form {
padding: 48rpx;
.u-textarea {
background-color: inherit;
padding: 0;
}
}
}
</style>