HB
/
ruoyi-miniapp
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

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

master
爱~海~爱海爱海~右 2 weeks ago
parent
1aeb88b29c
commit
6da6c691ae
9 changed files with 192 additions and 291 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  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
Unescape View File

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

18
pages/enterprise.vue
Unescape View File

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

2
static/scss/global.scss
Unescape View File

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

10
sub/enterprise/detail.vue
Unescape View File

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

164
sub/invite/addEnterprise.vue
Unescape View File

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

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

228
sub/invite/enterpriseTags.vue
Unescape View File

@ -1,83 +1,27 @@
<template> <template>
<view class="view"> <view class="view">
<view class="block"> <view class="block">
<view> <view
<text style="color: #f8285a; margin-right: 4px">*</text> class="row"
所在区域 v-for="item in data"
</view> :key="item.value"
<view class="value" @click="showPicker('qy')"> @tap="select(item)"
<view class="input-value" v-if="form.qy"> >
{{ form.qy.name }} <view class="label">
</view> {{ item.label }}
<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> </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> </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> <cs-bottom-wrapper>
<view class="operation"> <view class="operation">
<button class="btn green" @tap="submit">保存</button> <button class="btn green" @tap="submit">保存</button>
@ -92,54 +36,25 @@ export default {
data() { data() {
return { return {
data: [], data: [],
form: { hy: []
qy: '',
hy: '',
st: '',
wr: ''
},
dictMap: {},
// 选择器
picker: {
show: false,
// 做表单中键的缓存用
key: null,
defaultIndex: [0],
data: []
}
} }
}, },
onLoad(res) { async onLoad(res) {
this.getDict() await this.getDict()
if (res.tags) { if (res.tags) {
this.form = JSON.parse(res.tags) this.hy = JSON.parse(res.tags)
} }
}, },
methods: { methods: {
async getDict() { async getDict() {
try { try {
const tags = await getTagData(['qy', 'hy', 'st', 'wr'].join(',')) const tags = await getTagData(['hy'].join(','))
const dict = await getDictBatchByType({ this.data = tags.data[0].children.map(i => {
type: ['enterprises_area'].join(',') 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) { } catch (error) {
uni.showToast({ uni.showToast({
title: '获取数据失败', title: '获取数据失败',
@ -147,65 +62,22 @@ export default {
}) })
} }
}, },
select(item) {
/** if (this.hy.map(i => i.value).indexOf(item.value) > -1) {
* 选择器确认回调 this.hy = this.hy.filter(i => i.value != item.value)
* @param {Object} e } else {
*/ this.hy.push(item)
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]
} }
}, },
submit() { submit() {
// 校验所有字段是否已填写 if (this.hy.length == 0) {
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('污染类型')
uni.showToast({ uni.showToast({
title: `请选择${emptyFields.join('、')}`, title: '至少选择一个行业标签',
icon: 'none' icon: 'none'
}) })
return return
} }
uni.$emit('enterpriseTag', this.hy)
// 构造提交的数据格式
const submitData = {
qy: this.form.qy,
hy: this.form.hy
}
console.log(submitData)
uni.$emit('enterpriseTag', submitData)
uni.navigateBack() uni.navigateBack()
} }
} }
@ -223,32 +95,20 @@ export default {
max-height: 100vh; max-height: 100vh;
padding-bottom: 12vh; padding-bottom: 12vh;
} }
.input-value {
flex: 1;
text-align: right;
white-space: nowrap;
text-overflow: ellipsis;
}
.block { .block {
display: flex; display: flex;
flex-flow: row nowrap; flex-flow: column nowrap;
background-color: #fff; background-color: #fff;
padding: 12px; .row {
border-radius: 8px; padding: 32rpx;
justify-content: space-between; border-bottom: 1px solid #f1f1f4;
align-items: center;
gap: 12px;
.value {
flex: 1;
display: flex; display: flex;
flex-flow: row nowrap;
justify-content: space-between; justify-content: space-between;
gap: 4px; &:last-child {
.input-value { border-bottom: none;
flex: 1; }
text-align: right; .label {
white-space: nowrap; color: #071437;
text-overflow: ellipsis;
} }
} }
} }

14
sub/invite/index.vue
Unescape View File

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

26
sub/task/record.vue
Unescape View File

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

Write Preview
Loading…
Cancel
Save