进件代码调整，增加进件列表页面和筛选
This commit is contained in:
203
entryManager/components/shop-select.vue
Normal file
203
entryManager/components/shop-select.vue
Normal file
@@ -0,0 +1,203 @@
|
||||
<template>
|
||||
<view>
|
||||
|
||||
<up-popup :show="show" placement="bottom" round="18rpx" closeOnClickOverlay @close="close">
|
||||
<view class="u-p-30">
|
||||
<view class="font-bold color-333 u-font-32">选择门店</view>
|
||||
<view class="u-m-t-24">
|
||||
<up-search v-model="query.shopName" @search="search" @clear="search" @custom="search"></up-search>
|
||||
</view>
|
||||
<scroll-view @scrolltolower="scrolltolower" scroll-with-animation :scroll-into-view="selShopId"
|
||||
class="scroll-view u-m-t-30" scroll-y="true" style="max-height :60vh;">
|
||||
<view class="u-m-b-10 u-flex item" v-for="item in list" :key="item.shopId" @click="itemClick(item)"
|
||||
:id="'shop_'+item.shopId" :class="{active:selShop==item.shopId}">
|
||||
<view class="checkbox">
|
||||
<up-icon name="checkbox-mark" color="#fff"></up-icon>
|
||||
</view>
|
||||
<view class="u-flex-1">{{item.shopName}}</view>
|
||||
</view>
|
||||
<template v-if="query.shopName!==''">
|
||||
<up-empty v-if="list.length==0" text="未搜索到相关店铺"></up-empty>
|
||||
<up-loadmore v-else :status="isEnd?'nomor':'loading'"></up-loadmore>
|
||||
</template>
|
||||
<template v-else>
|
||||
<up-loadmore :status="isEnd?'nomor':'loading'"></up-loadmore>
|
||||
</template>
|
||||
</scroll-view>
|
||||
<view class="u-flex gap-20 u-m-t-30">
|
||||
<view class="u-flex-1">
|
||||
<my-button type="default" @click="close">取消</my-button>
|
||||
</view>
|
||||
<view class="u-flex-1">
|
||||
<my-button type="primary" @click="submit">确定</my-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</up-popup>
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
import {
|
||||
computed,
|
||||
onMounted,
|
||||
reactive,
|
||||
ref,
|
||||
watch
|
||||
} from 'vue';
|
||||
import {
|
||||
adminShopList
|
||||
} from '@/http/api/shop.js';
|
||||
|
||||
const customStyle = ref({
|
||||
marginRight: '20px'
|
||||
});
|
||||
|
||||
const show = defineModel(false)
|
||||
let selShop = defineModel('selShop', {
|
||||
default: '',
|
||||
});
|
||||
|
||||
|
||||
|
||||
const selShopId = ref('')
|
||||
|
||||
function returnLabel() {
|
||||
const findShop = list.value.find(v => v.shopId == selShop.value)
|
||||
return findShop ? findShop.shopName : ''
|
||||
}
|
||||
|
||||
function itemClick(shop) {
|
||||
selShop.value = shop.shopId
|
||||
}
|
||||
|
||||
function returnShopName(shopId) {
|
||||
const item = list.value.find((v) => v.shopId == shopId);
|
||||
return item?.shopName || '';
|
||||
}
|
||||
|
||||
function close() {
|
||||
show.value = false;
|
||||
}
|
||||
|
||||
const emits=defineEmits(['confirm'])
|
||||
function submit() {
|
||||
show.value = false;
|
||||
if(!selShop.value){
|
||||
return uni.showToast({
|
||||
title:'请选择门店',
|
||||
icon:'none'
|
||||
})
|
||||
}
|
||||
const findShop = list.value.find(v => v.shopId == selShop.value)
|
||||
emits('confirm',findShop)
|
||||
}
|
||||
|
||||
|
||||
const list = ref([]);
|
||||
|
||||
function openPopup() {
|
||||
selShopId.value = 'shop_' + selShop.value
|
||||
show.value = true;
|
||||
|
||||
}
|
||||
|
||||
const query = reactive({
|
||||
page: 1,
|
||||
size: 10,
|
||||
shopName: '',
|
||||
})
|
||||
const isEnd = ref(false)
|
||||
|
||||
function scrolltolower() {
|
||||
if (!isEnd.value) {
|
||||
query.page++
|
||||
init()
|
||||
}
|
||||
}
|
||||
|
||||
function search() {
|
||||
selShop.value = '';
|
||||
query.page = 1;
|
||||
isEnd.value = false
|
||||
init()
|
||||
}
|
||||
async function init() {
|
||||
const res = await adminShopList(query);
|
||||
if (res) {
|
||||
const arr = res.records.map((item) => ({
|
||||
shopId: item.id,
|
||||
shopName: item.shopName,
|
||||
}));
|
||||
isEnd.value = query.page >= res.totalPage * 1
|
||||
if (query.page == 1) {
|
||||
list.value = arr
|
||||
} else {
|
||||
list.value.push(...arr)
|
||||
}
|
||||
}
|
||||
}
|
||||
onMounted(init);
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.box {
|
||||
border-radius: 8upx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: top;
|
||||
flex-wrap: wrap;
|
||||
padding: 10rpx 24rpx;
|
||||
border: 2rpx solid #e5e5e5;
|
||||
position: relative;
|
||||
|
||||
.icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 24rpx;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.shop-item {
|
||||
padding: 4rpx 8rpx 4rpx 16rpx;
|
||||
border-radius: 4rpx;
|
||||
border: 2rpx solid #f0f0f0;
|
||||
background-color: #f5f5f5;
|
||||
margin-bottom: 16rpx;
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
|
||||
.scroll-view {
|
||||
.item {
|
||||
border: 1px solid #eee;
|
||||
padding: 20rpx;
|
||||
border-radius: 12rpx;
|
||||
|
||||
&.active {
|
||||
border-color: $my-main-color;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
margin-right: 10rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 6rpx;
|
||||
border: 1px solid #999;
|
||||
|
||||
}
|
||||
|
||||
.item {
|
||||
&.active {
|
||||
.checkbox {
|
||||
background-color: $my-main-color;
|
||||
border-color: $my-main-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user