110 lines
2.2 KiB
Vue
110 lines
2.2 KiB
Vue
<template>
|
|
<uni-popup ref='popupRef' type='bottom' :mask-click='false' @touchmove.stop.prevent=''>
|
|
<view class='content'>
|
|
<text class='title'>切换门店</text>
|
|
<scroll-view scroll-y style='max-height: 600rpx;padding: 15rpx'>
|
|
<view class='store-item' v-for='(item, index) in companyList' :key='index' @click='() => {
|
|
handleClick(index)
|
|
}'>
|
|
<view class='c-flex-row'>
|
|
<text>{{ item?.companyName || '' }}</text>
|
|
<image v-if='index===currentIndex' src='/static/images/ic_checkmark_red.png' />
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<view class='close-btn primary-button' @click='close'>
|
|
<text>取消</text>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
</template>
|
|
|
|
<script lang='ts' setup>
|
|
const props = defineProps({
|
|
companyList: {
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
});
|
|
|
|
const popupRef = ref();
|
|
const currentIndex = ref(0);
|
|
let callback: Function;
|
|
|
|
const show = (companyId: string, fn: Function) => {
|
|
if(companyId) {
|
|
currentIndex.value = props.companyList.findIndex(item => item.id === companyId);
|
|
}
|
|
callback = fn;
|
|
popupRef.value.open();
|
|
};
|
|
|
|
const handleClick = (index: number) => {
|
|
currentIndex.value = index;
|
|
callback(index);
|
|
close();
|
|
};
|
|
|
|
const close = () => {
|
|
popupRef.value.close();
|
|
};
|
|
|
|
defineExpose({
|
|
show, close
|
|
});
|
|
</script>
|
|
|
|
<style lang='scss' scoped>
|
|
.content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: #FFFFFF;
|
|
border-radius: 20rpx 20rpx 0 0;
|
|
padding: 20rpx 30rpx 30rpx 30rpx;
|
|
|
|
.title {
|
|
display: flex;
|
|
align-self: center;
|
|
font-size: 30rpx;
|
|
font-weight: bold;
|
|
padding: 20rpx;
|
|
}
|
|
|
|
.store-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-size: 35rpx;
|
|
color: #333333;
|
|
//padding: 20rpx 20rpx;
|
|
|
|
|
|
.c-flex-row {
|
|
text {
|
|
display: flex;
|
|
flex: 1;
|
|
}
|
|
|
|
image {
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
margin-right: 30rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.store-item:after {
|
|
content: '';
|
|
background: #F5F5F5;
|
|
height: 0.5rpx;
|
|
width: 100%;
|
|
margin: 25rpx 0;
|
|
}
|
|
|
|
.close-btn {
|
|
background: #F5F5F5;
|
|
color: #333333;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
</style>
|