165 lines
3.4 KiB
Vue
165 lines
3.4 KiB
Vue
<template>
|
|
<view>
|
|
|
|
<view class="box" @click.stop="openPopup">
|
|
<text class="u-font-28 color-999 u-p-r-16" v-if="!modelValue">请选择</text>
|
|
<text class="u-font-28 color-333 u-p-r-16" v-else>{{returnLabel()}}</text>
|
|
<view class="icon">
|
|
<up-icon name="arrow-down" size="14" color="#999"></up-icon>
|
|
</view>
|
|
</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>
|
|
<scroll-view 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:modelValue==item.shopId}">
|
|
<view class="checkbox">
|
|
<up-icon name="checkbox-mark" color="#fff"></up-icon>
|
|
</view>
|
|
<view class="u-flex-1">{{item.shopName}}</view>
|
|
</view>
|
|
</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 = ref(false);
|
|
let modelValue = defineModel('modelValue', {
|
|
default: '',
|
|
});
|
|
|
|
const selShopId = ref('')
|
|
|
|
function returnLabel() {
|
|
const findShop = list.value.find(v => v.shopId == modelValue.value)
|
|
return findShop ? findShop.shopName : ''
|
|
}
|
|
|
|
function itemClick(shop) {
|
|
modelValue.value = shop.shopId
|
|
}
|
|
|
|
function returnShopName(shopId) {
|
|
const item = list.value.find((v) => v.shopId == shopId);
|
|
return item?.shopName || '';
|
|
}
|
|
|
|
function close() {
|
|
show.value = false;
|
|
}
|
|
|
|
function submit() {
|
|
show.value = false;
|
|
}
|
|
|
|
|
|
const list = ref([]);
|
|
|
|
function openPopup() {
|
|
selShopId.value = 'shop_' + modelValue.value
|
|
show.value = true;
|
|
|
|
}
|
|
async function init() {
|
|
const res = await adminShopList({
|
|
page: 1,
|
|
size: 99999
|
|
});
|
|
if (res) {
|
|
list.value = res.records.map((item) => ({
|
|
shopId: item.id,
|
|
shopName: item.shopName,
|
|
}));
|
|
}
|
|
}
|
|
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> |