Browse Source

fix(组件): 修复地址选择器在弹窗中的使用问题

- 将地址选择器从弹窗内容中移出,改为独立组件引用
- 添加弹窗中地址选择的专用UI和交互逻辑
- 修复地址选择结果处理中的字段错误
- 统一事件总线调用方式为uni.$emit/uni.$on
master
前端-胡立永 3 weeks ago
parent
commit
0192681b8f
3 changed files with 70 additions and 15 deletions
  1. +68
    -13
      components/screen/screenWork.vue
  2. +1
    -1
      pages/index/index.vue
  3. +1
    -1
      store/store.js

+ 68
- 13
components/screen/screenWork.vue View File

@ -41,9 +41,6 @@
@clickItem="clickItem" @clickItem="clickItem"
@popupChange="change"></uv-drop-down-popup> @popupChange="change"></uv-drop-down-popup>
<!-- 地址选择组件 -->
<AddressPicker ref="addressPicker" @confirm="onAddressConfirm" />
<uv-popup ref="popup" :round="30" <uv-popup ref="popup" :round="30"
:safeAreaInsetBottom="false"> :safeAreaInsetBottom="false">
<view class="popup"> <view class="popup">
@ -55,7 +52,17 @@
<view class="title"> <view class="title">
{{ role ? item.bossTitle : item.title }} {{ role ? item.bossTitle : item.title }}
</view> </view>
<view class="tagList">
<!-- 地址选择使用AddressPicker组件 -->
<view v-if="item.type === 'areaId'" class="address-selector" @click="openAddressPickerInPopup">
<view class="selected-address">
{{ popupSelectedAddress || '请选择工作地区' }}
</view>
<view class="arrow">
<uv-icon name="arrow-right" size="30rpx"></uv-icon>
</view>
</view>
<!-- 其他选项使用tagList -->
<view v-else class="tagList">
<view <view
:class="{act : i == item.index}" :class="{act : i == item.index}"
@click="clickTag(item, i)" @click="clickTag(item, i)"
@ -72,6 +79,9 @@
</view> </view>
</view> </view>
</uv-popup> </uv-popup>
<!-- 地址选择组件 -->
<AddressPicker ref="addressPicker" @confirm="onAddressConfirm" />
</view> </view>
</template> </template>
@ -162,7 +172,8 @@
index : 0, index : 0,
type : 'areaId', type : 'areaId',
}, },
]
],
popupSelectedAddress: '', //
} }
}, },
computed : { computed : {
@ -305,6 +316,7 @@
this.result = this.result.filter(item => this.defaultValue.indexOf(item.value) == -1); this.result = this.result.filter(item => this.defaultValue.indexOf(item.value) == -1);
console.log('this.result', this.result);
this.$emit('clickItem', this.result) this.$emit('clickItem', this.result)
}, },
@ -313,12 +325,22 @@
this.result = [] this.result = []
this.list.forEach(n => { this.list.forEach(n => {
let t = n.tag[n.index]
this.result.push({
name: n.type,
label : t.label,
value : t.value
})
// 使AddressPicker
if(n.type === 'areaId' && this.popupSelectedAddress) {
this.result.push({
name: n.type,
label: this.popupSelectedAddress,
value: this.popupSelectedAddress
})
} else {
// 使tag
let t = n.tag[n.index]
this.result.push({
name: n.type,
label : t.label,
value : t.value
})
}
}) })
this.result = this.result.filter(item => this.defaultValue.indexOf(item.value) == -1); this.result = this.result.filter(item => this.defaultValue.indexOf(item.value) == -1);
@ -327,17 +349,30 @@
this.$refs.popup.close() this.$refs.popup.close()
}, },
//
openAddressPickerInPopup() {
this.$refs.addressPicker.open()
},
// //
onAddressConfirm(addressResult) { onAddressConfirm(addressResult) {
//
this.popupSelectedAddress = addressResult.fullAddress
// areaId // areaId
this.areaId.label = addressResult.fullAddress this.areaId.label = addressResult.fullAddress
this.areaId.value = addressResult.selectedAddress.selectedAddress
this.areaId.value = addressResult.selectedAddress.adress
console.log('addressResult', addressResult);
// clickItemresult // clickItemresult
this.clickItem({ this.clickItem({
label: addressResult.fullAddress, label: addressResult.fullAddress,
value: addressResult.selectedAddress.selectedAddress
value: addressResult.selectedAddress.adress,
}) })
//
this.$refs.dropDown.close()
}, },
} }
} }
@ -371,6 +406,26 @@
background: $uni-color; background: $uni-color;
} }
} }
.address-selector {
display: flex;
justify-content: space-between;
align-items: center;
background: rgba($uni-color, 0.1);
padding: 10rpx 20rpx;
margin: 10rpx;
border-radius: 10rpx;
font-size: 26rpx;
.selected-address {
flex: 1;
color: #333;
}
.arrow {
margin-left: 10rpx;
}
}
} }
} }
.btn { .btn {


+ 1
- 1
pages/index/index.vue View File

@ -137,7 +137,7 @@
this.$store.commit('getBanner') this.$store.commit('getBanner')
}, },
onLoad(){ onLoad(){
uni.on('initConfig', (e) => {
uni.$on('initConfig', (e) => {
this.config_other_job = e.config_other_job this.config_other_job = e.config_other_job
}) })
}, },


+ 1
- 1
store/store.js View File

@ -33,7 +33,7 @@ const store = new Vuex.Store({
// state.configList[n.keyName + '_keyValue'] = n.keyValue // state.configList[n.keyName + '_keyValue'] = n.keyValue
}) })
uni.emit('initConfig', state.configList)
uni.$emit('initConfig', state.configList)
} }
}) })


Loading…
Cancel
Save