Browse Source

优化企业标签选择和区域显示,调整样式以提升用户体验

master
parent
commit
6da6c691ae
  1. 2
      pages.json
  2. 18
      pages/enterprise.vue
  3. 2
      static/scss/global.scss
  4. 10
      sub/enterprise/detail.vue
  5. 164
      sub/invite/addEnterprise.vue
  6. 19
      sub/invite/enterpriseIntroduce.vue
  7. 228
      sub/invite/enterpriseTags.vue
  8. 14
      sub/invite/index.vue
  9. 26
      sub/task/record.vue

2
pages.json

@ -246,7 +246,7 @@
{
"path": "invite/enterpriseTags",
"style": {
"navigationBarTitleText": "环保标签"
"navigationBarTitleText": "行业类别(可多选)"
}
},
{

18
pages/enterprise.vue

@ -90,19 +90,19 @@
style="margin-bottom: 16rpx; margin-top: 4rpx"
>
<u-icon name="map" size="14" color="#17C653"></u-icon>
<text class="address wd-text-12" style="margin-left: 4px">
{{ enterprise.address }}
</text>
</view>
<view class="tagList">
<view class="tag">
<text
class="address"
style="margin-left: 8rpx; font-size: 26rpx"
>
{{
$dict.echoDicValue(
`${$dict.echoDicValue(
dictMap.enterprises_area,
enterprise.region
)
)} | ${enterprise.address}`
}}
</view>
</text>
</view>
<view class="tagList">
<view
class="tag"
v-for="(tag, index) in enterprise.tagList"

2
static/scss/global.scss

@ -30,7 +30,7 @@ button {
.tagList {
display: flex;
flex-flow: row wrap;
flex-flow: row nowrap;
align-items: center;
gap: 16rpx;
.tag {

10
sub/enterprise/detail.vue

@ -20,13 +20,15 @@
overflow: hidden;
"
>
{{ detail.address }}
{{
`${$dict.echoDicValue(
dictMap.enterprises_area,
detail.region
)} | ${detail.address}`
}}
</text>
</view>
<view class="tagList">
<view class="tag">
{{ $dict.echoDicValue(dictMap.enterprises_area, detail.region) }}
</view>
<view
class="tag"
v-for="(tag, index) in detail.tagList"

164
sub/invite/addEnterprise.vue

@ -23,24 +23,54 @@
</view>
</view>
<view class="block">
<view style="">
<text style="color: #f8285a; margin-right: 4px">*</text>
所属区域
</view>
<view class="value" @tap="picker.show = true">
<view class="input-textarea" v-if="form.region">
{{ $dict.echoDicValue(dictMap.enterprises_area, form.region) }}
</view>
<view class="input-textarea" style="color: #999999" v-else>
请选择所属区域
</view>
<u-icon name="arrow-right"></u-icon>
</view>
</view>
<view class="block">
<view style="">
<text style="color: #f8285a; margin-right: 4px">*</text>
企业地址
</view>
<view class="value" @tap="chooseAddress">
<input
class="input-value"
type="text"
placeholder-class="txt"
placeholder="请选择企业地址"
v-model="form.address"
disabled
/>
<view class="input-textarea" v-if="form.address">
{{ form.address }}
</view>
<view class="input-textarea" style="color: #999999" v-else>
请选择企业地址
</view>
<u-icon name="map"></u-icon>
</view>
</view>
<view class="block">
<view class="label">
<text style="color: #f8285a; margin-right: 4px">*</text>
行业类别
</view>
<view class="value" style="width: 50%" @tap="goTags">
<view class="input-value" v-if="form.hy.length > 0">
{{ form.hy.map(i => i.label).join('、') }}
</view>
<view class="input-textarea" style="color: #999999" v-else>
请选择企业标签
</view>
<u-icon name="arrow-right"></u-icon>
</view>
</view>
<view class="block">
<view style="">
<text style="color: #f8285a; margin-right: 4px">*</text>
@ -50,7 +80,7 @@
<view class="input-textarea" v-if="form.introduction">
{{ form.introduction }}
</view>
<view class="input-textarea" style="color: #808080" v-else>
<view class="input-textarea" style="color: #999999" v-else>
请输入企业介绍
</view>
<u-icon name="arrow-right"></u-icon>
@ -70,7 +100,7 @@
<text style="color: #f8285a; margin-right: 4px">*</text>
企业照片
</view>
<view style="color: #808080">最多可传3张</view>
<view style="color: #999999">最多可传3张</view>
</view>
<u-upload
:fileList="form.photo"
@ -78,31 +108,11 @@
@delete="delEnterprisePhoto"
multiple
:maxCount="3"
width="101"
height="101"
width="96"
height="96"
></u-upload>
</view>
<view class="block">
<view class="label">
<text style="color: #f8285a; margin-right: 4px">*</text>
企业标签
</view>
<view class="value" style="width: 50%" @tap="goTags">
<view class="input-value" v-if="Object.keys(form.tags).length">
{{
Object.values(form.tags)
.map(tag => tag.name)
.join('、')
}}
</view>
<view class="input-textarea" style="color: #808080" v-else>
请选择企业标签
</view>
<u-icon name="arrow-right"></u-icon>
</view>
</view>
<view class="block">
<view style="">
<text style="color: #f8285a; margin-right: 4px">*</text>
@ -225,6 +235,20 @@
</view>
</view>
<view style="height: 96rpx; width: 100%"></view>
<u-picker
:show="picker.show"
:columns="picker.data"
@cancel="closePicker"
closeOnClickOverlay
keyName="name"
ref="uPicker"
:defaultIndex="picker.defaultIndex"
@close="closePicker"
@confirm="confirmPicker"
></u-picker>
<cs-bottom-wrapper>
<view class="operation">
<button class="btn green" @tap="submit">提交审核</button>
@ -255,15 +279,25 @@ export default {
tags: {},
environmentalContactPhone: '',
contactName: '',
id: ''
id: '',
region: '',
hy: []
},
//
picker: {
show: false,
//
key: null,
defaultIndex: [0],
data: []
},
dictMap: {},
prove: [],
inviteId: ''
}
},
onLoad(res) {
this.getDict()
async onLoad(res) {
await this.getDict()
this.inviteId = res.inviteId
if (res.id) {
this.form.id = res.id
@ -279,11 +313,9 @@ export default {
this.form.introduction = data.introduce
})
uni.$on('enterpriseTag', data => {
this.form.tags = data
this.form.hy = data
})
uni.$on('prove', data => {
console.log('资质', this.prove)
console.log('资质返回', data)
if (this.form.id != '') {
this.getProve()
} else {
@ -334,26 +366,22 @@ export default {
async init() {
const enterprise = await getEnterPrise(this.form.id)
this.form = enterprise.data
this.form.photo = enterprise.data.files
const tag = {}
enterprise.data.tagObjList.forEach(t => {
tag[t.tagCode] = {
name: t.tagName,
this.form.photo = enterprise.data.files.map(i => {
return {
...i,
status: 'success',
message: ''
}
})
this.form.hy = enterprise.data.tagObjList.map(t => {
return {
label: t.tagName,
value: t.id
}
})
tag.qy = {
name: this.$dict.echoDicValue(
this.dictMap.enterprises_area,
enterprise.data.region
),
value: enterprise.data.region
}
this.form.tags = tag
this.getProve()
},
async getProve() {
console.log('getProve', this.prove)
const load = this.$util.loading()
const prove = await getProveList({ enterpriseId: this.form.id })
load.close()
@ -375,6 +403,14 @@ export default {
this.dictMap = {
...dict.data
}
this.picker.data = [
dict.data.enterprises_area.map(i => {
return {
name: i.label,
value: i.value
}
})
]
},
chooseAddress() {
uni.chooseLocation({
@ -392,7 +428,7 @@ export default {
goTags() {
uni.navigateTo({
url: `/sub/invite/enterpriseTags?tags=${JSON.stringify(
this.form.tags
this.form.hy
)}`
})
},
@ -426,6 +462,7 @@ export default {
})
).then(res => {
this.form.photo = res
this.$forceUpdate()
uni.hideLoading()
})
},
@ -435,6 +472,7 @@ export default {
*/
delEnterprisePhoto(e) {
this.form.photo.splice(e.index, 1)
this.$forceUpdate()
},
addProve() {
uni.navigateTo({
@ -450,8 +488,7 @@ export default {
const valide = await this.verifyForm()
if (!valide) return
const data = { ...this.form }
data.region = data.tags.qy.id
data.tagIds = [data.tags.hy.id, data.tags.st.id, data.tags.wr.id]
data.tagIds = this.form.hy.map(i => i.value)
data.fileIds = data.photo.map(i => i.id)
data.userId = this.inviteId
data.qualis = this.prove.map(i => {
@ -489,7 +526,6 @@ export default {
gpsLocation: '请选择企业地址',
introduction: '请填写企业介绍',
photo: '最少上传一张企业照片',
tags: '请选择企业标签',
prove: '请填写企业资质',
environmentalContactPhone: '请输入企业负责人',
contactName: '请输入负责人电话'
@ -517,6 +553,22 @@ export default {
return false
}
return true
},
/**
* 选择器确认回调
* @param {Object} e
*/
confirmPicker(e) {
const { value } = e
//
this.form.region = value[0].value
this.closePicker()
},
/**
* 关闭选择器
*/
closePicker() {
this.picker.show = false
}
}
}

19
sub/invite/enterpriseIntroduce.vue

@ -31,9 +31,7 @@
height: '360rpx'
}"
></uni-easyinput>
<view class="word-count">
{{ introduce.length }}/500
</view>
<view class="word-count">{{ introduce.length }}/500</view>
</view>
<cs-bottom-wrapper>
<view class="operation">
@ -57,15 +55,14 @@ export default {
methods: {
//
focusInput() {
console.log(this.$refs)
if (this.$refs.easyInput) {
this.textAreaFocus = false //
if (this.$refs.easyInput) {
this.textAreaFocus = false //
this.$nextTick(() => {
this.textAreaFocus = true //
})
} else {
console.warn('输入框组件未注册')
}
this.textAreaFocus = true //
})
} else {
console.warn('输入框组件未注册')
}
},
submit() {
if (!this.introduce) {

228
sub/invite/enterpriseTags.vue

@ -1,83 +1,27 @@
<template>
<view class="view">
<view class="block">
<view>
<text style="color: #f8285a; margin-right: 4px">*</text>
所在区域
</view>
<view class="value" @click="showPicker('qy')">
<view class="input-value" v-if="form.qy">
{{ form.qy.name }}
</view>
<view class="input-value" style="color: #808080" v-else>
请选择所在区域
</view>
<u-icon name="arrow-right"></u-icon>
</view>
</view>
<!-- 行业类型 -->
<view class="block">
<view>
<text style="color: #f8285a; margin-right: 4px">*</text>
行业类型
</view>
<view class="value" @click="showPicker('hy')">
<view class="input-value" v-if="form.hy">
{{ form.hy.name }}
</view>
<view class="input-value" style="color: #808080" v-else>
请选择行业类型
<view
class="row"
v-for="item in data"
:key="item.value"
@tap="select(item)"
>
<view class="label">
{{ item.label }}
</view>
<u-icon name="arrow-right"></u-icon>
<u-icon
name="checkbox-mark"
size="20"
:color="
hy.map(i => i.value).indexOf(item.value) > -1
? '#17C653'
: '#fff'
"
></u-icon>
</view>
</view>
<!-- 生态类型 -->
<!-- <view class="block">
<view>
<text style="color: #f8285a; margin-right: 4px">*</text>
所属生态
</view>
<view class="value" @click="showPicker('st')">
<view class="input-value" v-if="form.st">
{{ form.st.name }}
</view>
<view class="input-value" style="color: #808080" v-else>
请选择所属生态
</view>
<u-icon name="arrow-right"></u-icon>
</view>
</view> -->
<!-- 污染类型 -->
<!-- <view class="block">
<view>
<text style="color: #f8285a; margin-right: 4px">*</text>
污染类型
</view>
<view class="value" @click="showPicker('wr')">
<view class="input-value" v-if="form.wr">
{{ form.wr.name }}
</view>
<view class="input-value" style="color: #808080" v-else>
请选择污染类型
</view>
<u-icon name="arrow-right"></u-icon>
</view>
</view> -->
<u-picker
:show="picker.show"
:columns="picker.data"
@cancel="closePicker"
closeOnClickOverlay
keyName="name"
ref="uPicker"
:defaultIndex="picker.defaultIndex"
@close="closePicker"
@confirm="confirmPicker"
></u-picker>
<cs-bottom-wrapper>
<view class="operation">
<button class="btn green" @tap="submit">保存</button>
@ -92,54 +36,25 @@ export default {
data() {
return {
data: [],
form: {
qy: '',
hy: '',
st: '',
wr: ''
},
dictMap: {},
//
picker: {
show: false,
//
key: null,
defaultIndex: [0],
data: []
}
hy: []
}
},
onLoad(res) {
this.getDict()
async onLoad(res) {
await this.getDict()
if (res.tags) {
this.form = JSON.parse(res.tags)
this.hy = JSON.parse(res.tags)
}
},
methods: {
async getDict() {
try {
const tags = await getTagData(['qy', 'hy', 'st', 'wr'].join(','))
const dict = await getDictBatchByType({
type: ['enterprises_area'].join(',')
const tags = await getTagData(['hy'].join(','))
this.data = tags.data[0].children.map(i => {
return {
label: i.tagName,
value: i.id
}
})
if (tags.code === 0 && tags.data) {
let tagMap = {}
tags.data.forEach(t => {
//
const children = t.children.map(child => ({
name: child.tagName,
value: child.id.toString()
}))
tagMap[t.tagCode] = children
})
tagMap.qy = dict.data.enterprises_area.map(i => {
return {
name: i.label,
value: i.value
}
})
this.dictMap = tagMap
}
} catch (error) {
uni.showToast({
title: '获取数据失败',
@ -147,65 +62,22 @@ export default {
})
}
},
/**
* 选择器确认回调
* @param {Object} e
*/
confirmPicker(e) {
const { value } = e
//
this.form[this.picker.key] = {
name: value[0].name,
id: value[0].value
}
this.closePicker()
},
/**
* 关闭选择器
*/
closePicker() {
this.picker = {
show: false,
key: '',
data: []
}
},
showPicker(type) {
this.picker.data = [this.dictMap[type] || []]
this.picker.key = type
this.picker.show = true
if (this.form[type]) {
const index = this.dictMap[type].findIndex(
i => i.value == this.form[type].id
)
this.picker.defaultIndex = index > -1 ? [index] : [0]
select(item) {
if (this.hy.map(i => i.value).indexOf(item.value) > -1) {
this.hy = this.hy.filter(i => i.value != item.value)
} else {
this.hy.push(item)
}
},
submit() {
//
if (!this.form.qy || !this.form.hy) {
const emptyFields = []
if (!this.form.qy) emptyFields.push('所在区域')
if (!this.form.hy) emptyFields.push('行业类型')
// if (!this.form.st) emptyFields.push('')
// if (!this.form.wr) emptyFields.push('')
if (this.hy.length == 0) {
uni.showToast({
title: `请选择${emptyFields.join('、')}`,
title: '至少选择一个行业标签',
icon: 'none'
})
return
}
//
const submitData = {
qy: this.form.qy,
hy: this.form.hy
}
console.log(submitData)
uni.$emit('enterpriseTag', submitData)
uni.$emit('enterpriseTag', this.hy)
uni.navigateBack()
}
}
@ -223,32 +95,20 @@ export default {
max-height: 100vh;
padding-bottom: 12vh;
}
.input-value {
flex: 1;
text-align: right;
white-space: nowrap;
text-overflow: ellipsis;
}
.block {
display: flex;
flex-flow: row nowrap;
flex-flow: column nowrap;
background-color: #fff;
padding: 12px;
border-radius: 8px;
justify-content: space-between;
align-items: center;
gap: 12px;
.value {
flex: 1;
.row {
padding: 32rpx;
border-bottom: 1px solid #f1f1f4;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
gap: 4px;
.input-value {
flex: 1;
text-align: right;
white-space: nowrap;
text-overflow: ellipsis;
&:last-child {
border-bottom: none;
}
.label {
color: #071437;
}
}
}

14
sub/invite/index.vue

@ -28,18 +28,15 @@
<view class="wd-flex wd-pb-8px">
<u-icon name="map" size="14" color="#17C653"></u-icon>
<text class="address wd-text-12" style="margin-left: 4px">
{{ enterprise.address }}
</text>
</view>
<view class="tagList">
<view class="tag">
{{
$dict.echoDicValue(
`${$dict.echoDicValue(
dictMap.enterprises_area,
enterprise.region
)
)} | ${enterprise.address}`
}}
</view>
</text>
</view>
<view class="tagList">
<view
class="tag"
v-for="(tag, index) in enterprise.tagList"
@ -250,6 +247,7 @@ export default {
align-items: flex-start;
gap: var(--Number-12px, 12px);
align-self: stretch;
overflow: hidden;
.tagList {
margin-top: 8px;
display: flex;

26
sub/task/record.vue

@ -42,33 +42,22 @@
shape="square"
size="64"
></u-avatar>
<view class="wd-flex wd-flex-col">
<view class="wd-flex wd-flex-col" style="overflow: hidden">
<text class="wd-font-800 wd-text-15">
{{ detail.enterprise.enterprisesName }}
</text>
<view class="wd-flex" style="margin-top: 4rpx">
<u-icon name="map" size="28rpx" color="#17C653"></u-icon>
<text class="address wd-text-12" style="margin-left: 8rpx">
{{ detail.enterprise.address }}
</text>
</view>
<view class="tagList" style="margin-top: 16rpx">
<view class="tag" v-if="detail.enterprise.region">
{{
$dict.echoDicValue(
`${$dict.echoDicValue(
dictMap.enterprises_area,
detail.enterprise.region
)
}}
</view>
<view class="tag" v-if="detail.enterprise.type">
{{
$dict.echoDicValue(
dictMap.enterprises_type,
detail.enterprise.type
)
)} | ${detail.enterprise.address}`
}}
</view>
</text>
</view>
<view class="tagList" style="margin-top: 16rpx">
<view
class="tag"
v-for="(tag, index) in detail.enterprise.tagList"
@ -326,6 +315,9 @@ export default {
font-size: 24rpx;
.address {
color: $uni-text-color-grey;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
&:active {
background-color: $cs-color-touch;

Loading…
Cancel
Save