142 lines
2.9 KiB
Vue
142 lines
2.9 KiB
Vue
|
<template>
|
|||
|
|
<up-popup :show="state.show" @close="close">
|
|||
|
|
<view class="warehouse-listBox" ref="listBoxRef">
|
|||
|
|
<scroll-view id="scroll-box" class="scroll-box" scroll-y="true" :style="{'height':state.scrollHeight+'px'}" >
|
|||
|
|
<view class="list-box-list">
|
|||
|
|
<view class="data-item" v-for="(item, index) of state.dataList" :key="index" @click="getAddressFun(item)">
|
|||
|
|
<view class="tit">{{ t('index.sbmc') }}：{{ item.name }}</view>
|
|||
|
|
<view class="line-p"></view>
|
|||
|
|
<view class="b-font">{{ t('index.sbbm') }}：{{ item.address }}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</scroll-view>
|
|||
|
|
</view>
|
|||
|
|
</up-popup>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script lang="ts" setup>
|
|||
|
|
import { reactive, nextTick, onMounted, ref, computed, defineProps, defineEmits, watch } from 'vue';
|
|||
|
|
import { onLoad, onShow, onReachBottom, } from '@dcloudio/uni-app'
|
|||
|
|
import { useI18n } from 'vue-i18n'
|
|||
|
|
const getI18n = useI18n()
|
|||
|
|
const { t, locale } = getI18n
|
|||
|
|
const emits = defineEmits(['getAddress'])
|
|||
|
|
const state = reactive({
|
|||
|
|
show:false,
|
|||
|
|
dataList: [],
|
|||
|
|
scrollHeight: 0,
|
|||
|
|
})
|
|||
|
|
const getAddressFun = (row:any) => {
|
|||
|
|
emits('getAddress',row)
|
|||
|
|
}
|
|||
|
|
const open = () => {
|
|||
|
|
state.show = true
|
|||
|
|
nextTick(() => {
|
|||
|
|
if (state.show) {
|
|||
|
|
const query = uni.createSelectorQuery().in(this);
|
|||
|
|
query.select(".warehouse-listBox").boundingClientRect((data : any) => {
|
|||
|
|
state.scrollHeight = data.height
|
|||
|
|
}).exec();
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
const getList = (item:any) => {
|
|||
|
|
state.dataList.push(item)
|
|||
|
|
}
|
|||
|
|
const close = () => {
|
|||
|
|
state.show = false
|
|||
|
|
state.dataList = []
|
|||
|
|
}
|
|||
|
|
defineExpose({
|
|||
|
|
open,
|
|||
|
|
close,
|
|||
|
|
getList
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
:deep(.u-popup__content) {
|
|||
|
|
border-top-left-radius: 16rpx;
|
|||
|
|
border-top-right-radius: 16rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 32rpx;
|
|||
|
|
background-color: #F5F5F5;
|
|||
|
|
min-height: 85vh;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.popupText {
|
|||
|
|
text-align: center;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
margin: 16rpx 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.input-box {
|
|||
|
|
background-color: white;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 0 16rpx;
|
|||
|
|
border-radius: 24rpx;
|
|||
|
|
margin: 0 0 16rpx 0;
|
|||
|
|
|
|||
|
|
.u-textarea {
|
|||
|
|
padding: 0 !important;
|
|||
|
|
font-size: 24rpx !important;
|
|||
|
|
color: #999999 !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.input-item {
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 16rpx 0;
|
|||
|
|
color: #222222;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
font-weight: 400;
|
|||
|
|
|
|||
|
|
.item-title {
|
|||
|
|
//font-weight: 500;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item-text {
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 27rpx;
|
|||
|
|
color: #999999;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.warehouse-listBox {
|
|||
|
|
display: block;
|
|||
|
|
flex: 1;
|
|||
|
|
|
|||
|
|
.list-box-list {
|
|||
|
|
width: 100%;
|
|||
|
|
|
|||
|
|
// margin: 20rpx auto;
|
|||
|
|
.data-item {
|
|||
|
|
border: 1px solid #efeaea;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
box-shadow: 0rpx 15rpx 15rpx #efeaea;
|
|||
|
|
padding: 20rpx 20rpx 0;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
background-color: #ffffff;
|
|||
|
|
|
|||
|
|
.tit {
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
padding: 20rpx 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.line-p {
|
|||
|
|
border: 1px solid #efeaea;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.b-font {
|
|||
|
|
font-size: 25rpx;
|
|||
|
|
padding: 20rpx 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|