157 lines
3.7 KiB
Vue
157 lines
3.7 KiB
Vue
<template>
|
|
<view>
|
|
<up-radio-group v-model="useType" placement="row">
|
|
<up-radio
|
|
v-for="item in useTypeList"
|
|
:key="item.value"
|
|
:name="item.value"
|
|
:label="item.label"
|
|
></up-radio>
|
|
</up-radio-group>
|
|
<view class="box" v-if="useType == 'part'" @click.stop="openPopup">
|
|
<text class="u-font-28 color-999 u-p-r-16">请选择</text>
|
|
<view
|
|
class="u-font-24 shop-item u-flex u-p-r-20 u-col-center u-p-r-16"
|
|
v-for="(item, index) in selShops"
|
|
:key="item.shopId"
|
|
>
|
|
<text>{{ returnShopName(item) }}</text>
|
|
<view @click.stop="delShop(index)">
|
|
<up-icon
|
|
name="close"
|
|
size="14"
|
|
@click="delShop(index)"
|
|
color="#999"
|
|
></up-icon>
|
|
</view>
|
|
</view>
|
|
<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
|
|
class="scroll-view u-m-t-30"
|
|
scroll-y="true"
|
|
max-height="40vh"
|
|
>
|
|
<view class="u-m-b-10" v-for="item in list" :key="item.shopId">
|
|
<up-checkbox
|
|
usedAlone
|
|
:name="item.shopId"
|
|
:label="item.shopName"
|
|
v-model:checked="item.checked"
|
|
></up-checkbox>
|
|
</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 { onMounted, reactive, ref, watch } from "vue";
|
|
import { getShopList } from "@/http/api/shop.js";
|
|
|
|
const show = ref(false);
|
|
const selShops = defineModel("selShops", {
|
|
default: () => [],
|
|
type: Array,
|
|
});
|
|
const useType = defineModel("useType", {
|
|
default: () => "all",
|
|
type: String,
|
|
});
|
|
const useTypeList = [
|
|
{
|
|
value: "all",
|
|
label: "全部门店",
|
|
},
|
|
{
|
|
value: "part",
|
|
label: "指定门店可用",
|
|
},
|
|
];
|
|
|
|
function returnShopName(shopId) {
|
|
const item = list.value.find((v) => v.shopId == shopId);
|
|
return item?.shopName || "";
|
|
}
|
|
function close() {
|
|
show.value = false;
|
|
}
|
|
function submit() {
|
|
selShops.value = list.value
|
|
.filter((item) => item.checked)
|
|
.map((v) => v.shopId);
|
|
show.value = false;
|
|
}
|
|
function delShop(index) {
|
|
selShops.value.splice(index, 1);
|
|
}
|
|
const list = ref([]);
|
|
|
|
function openPopup() {
|
|
show.value = true;
|
|
list.value = list.value.map((item) => ({
|
|
shopId: item.shopId,
|
|
shopName: item.shopName,
|
|
checked: selShops.value.includes(item.shopId),
|
|
}));
|
|
}
|
|
async function init() {
|
|
const res = await getShopList();
|
|
console.log("selShops.value", selShops.value);
|
|
|
|
if (res) {
|
|
list.value = res.map((item) => ({
|
|
shopId: item.shopId,
|
|
shopName: item.shopName,
|
|
checked: selShops.value.includes(item.shopId),
|
|
}));
|
|
}
|
|
}
|
|
onMounted(init);
|
|
</script>
|
|
<style lang="scss">
|
|
.box {
|
|
margin-top: 16rpx;
|
|
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;
|
|
}
|
|
</style> |