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> |