新增营销中心限时折扣模板
This commit is contained in:
316
components/my-components/my-select-goods.vue
Normal file
316
components/my-components/my-select-goods.vue
Normal file
@@ -0,0 +1,316 @@
|
||||
<template>
|
||||
<view class="my-select-goods">
|
||||
<view class="radio-wrap">
|
||||
<u-radio-group v-model="foodType">
|
||||
<u-radio v-for="item in radioList" :key="item.value" :label="item.label" :name="item.value" :customStyle="customStyle"></u-radio>
|
||||
</u-radio-group>
|
||||
</view>
|
||||
<view class="selec-goods-card" @click="popupShow = true" v-if="foodType == 2">
|
||||
<view class="title">
|
||||
<text class="t">选择商品</text>
|
||||
</view>
|
||||
<view class="placeholder">
|
||||
<view class="left">
|
||||
<text class="placeholder-t" v-if="selectGoodsCount.length <= 0">请选择商品</text>
|
||||
<text class="t" v-else>{{ selectGoodsCount.map((item) => item.name).join('、') }}</text>
|
||||
</view>
|
||||
<u-icon name="arrow-right" size="14px" color="#999"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<u-popup :show="popupShow" :round="20" closeable @close="popupClosed">
|
||||
<view class="popup-container">
|
||||
<view class="title">
|
||||
<text class="t">请选择</text>
|
||||
</view>
|
||||
<view class="goods-scroll-wrap">
|
||||
<view class="left">
|
||||
<scroll-view scroll-y class="scroll-view">
|
||||
<view
|
||||
class="category-item"
|
||||
v-for="(item, index) in categorys"
|
||||
:key="item.id"
|
||||
:class="{ active: categorysIndex == index }"
|
||||
@click="changeCategorys(item, index)"
|
||||
>
|
||||
<text class="t">{{ item.name }}</text>
|
||||
<text class="t" v-if="item.selectedNum > 0">({{ item.selectedNum }})</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="right">
|
||||
<scroll-view scroll-y class="scroll-view">
|
||||
<view class="goods-item" v-for="(item, index) in categorys[categorysIndex].goods" :key="item.id" @click="selectGoods(item, index)">
|
||||
<view class="name">
|
||||
<text class="t">{{ item.name }}</text>
|
||||
</view>
|
||||
<view class="selec-btn">
|
||||
<u-icon name="checkmark-circle-fill" color="#318afe" size="18" v-if="item.selected"></u-icon>
|
||||
<view class="circle" v-else></view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="footer">
|
||||
<view class="btn">
|
||||
<u-button type="primary" size="large" @click="confirmHandle">
|
||||
确定
|
||||
<template v-if="countNum > 0">({{ countNum }})</template>
|
||||
</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { getCategoryList, getProductList } from '@/http/api/product.js';
|
||||
|
||||
const popupShow = ref(false);
|
||||
|
||||
const modelValue = defineModel({
|
||||
type: [String, Array],
|
||||
default: []
|
||||
});
|
||||
|
||||
const customStyle = ref({
|
||||
marginRight: '20px'
|
||||
});
|
||||
|
||||
const radioList = ref([
|
||||
{
|
||||
value: 1,
|
||||
label: '全部商品参与'
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: '部分商品参与'
|
||||
}
|
||||
]);
|
||||
|
||||
const foodType = defineModel('foodType', {
|
||||
type: [Number, String],
|
||||
default: 1
|
||||
});
|
||||
|
||||
const categorys = ref([]);
|
||||
const categorysIndex = ref(0);
|
||||
|
||||
// 切换分类
|
||||
function changeCategorys(item, index) {
|
||||
categorysIndex.value = index;
|
||||
}
|
||||
|
||||
// 获取商品分类
|
||||
async function getCategoryListAjax() {
|
||||
try {
|
||||
categorys.value = await getCategoryList();
|
||||
categorys.value.forEach((item) => {
|
||||
item.goods = [];
|
||||
item.selectedNum = 0;
|
||||
});
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
const goods = ref([]);
|
||||
|
||||
function selectGoods(item, index) {
|
||||
item.selected = !item.selected;
|
||||
updateSelectGoods();
|
||||
}
|
||||
|
||||
// 在这个方法里更新已选择的数量和商品
|
||||
const countNum = ref(0);
|
||||
function updateSelectGoods() {
|
||||
countNum.value = 0;
|
||||
categorys.value.forEach((item) => {
|
||||
let num = 0;
|
||||
item.goods.forEach((val) => {
|
||||
if (val.selected) {
|
||||
num++;
|
||||
countNum.value++;
|
||||
}
|
||||
});
|
||||
item.selectedNum = num;
|
||||
});
|
||||
confirmSelectGoods;
|
||||
}
|
||||
|
||||
// 确定
|
||||
const foods = defineModel('foods', {
|
||||
type: [Array, String],
|
||||
default: []
|
||||
});
|
||||
function confirmHandle() {
|
||||
confirmSelectGoods();
|
||||
popupShow.value = false;
|
||||
}
|
||||
|
||||
// 点击确定更新已选择的商品
|
||||
const selectGoodsCount = ref([]);
|
||||
function confirmSelectGoods() {
|
||||
selectGoodsCount.value = [];
|
||||
categorys.value.forEach((item) => {
|
||||
item.goods.forEach((val) => {
|
||||
if (val.selected) {
|
||||
selectGoodsCount.value.push(val);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
foods.value = selectGoodsCount.value.map((item) => item.id);
|
||||
}
|
||||
|
||||
// 获取商品列表
|
||||
async function getProductListAjax() {
|
||||
try {
|
||||
const res = await getProductList();
|
||||
res.forEach((item, index) => {
|
||||
console.log('modelValue.value===', modelValue.value);
|
||||
console.log('index===', item.id.includes(modelValue.value));
|
||||
if (modelValue.value.includes(item.id)) {
|
||||
item.selected = true;
|
||||
} else {
|
||||
item.selected = false;
|
||||
}
|
||||
categorys.value.forEach((val, i) => {
|
||||
if (val.id == item.categoryId) {
|
||||
val.goods.push(item);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
updateSelectGoods();
|
||||
confirmSelectGoods();
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
// popup关闭
|
||||
function popupClosed() {
|
||||
popupShow.value = false;
|
||||
// countNum.value = 0;
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await getCategoryListAjax();
|
||||
await getProductListAjax();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.my-select-goods {
|
||||
.selec-goods-card {
|
||||
margin-top: 20upx;
|
||||
background-color: #f8f8f8;
|
||||
border-radius: 10upx;
|
||||
padding: 20upx;
|
||||
.ttile {
|
||||
.t {
|
||||
font-size: 28upx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
.placeholder {
|
||||
display: flex;
|
||||
padding-top: 12upx;
|
||||
.left {
|
||||
flex: 1;
|
||||
.placeholder-t {
|
||||
font-size: 28upx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.popup-container {
|
||||
$color: #318afe;
|
||||
.title {
|
||||
padding: 28upx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.t {
|
||||
font-size: 32upx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.goods-scroll-wrap {
|
||||
width: 100%;
|
||||
height: 50vh;
|
||||
display: flex;
|
||||
.left {
|
||||
width: 240upx;
|
||||
height: 100%;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
.right {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
}
|
||||
.scroll-view {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.category-item {
|
||||
width: 100%;
|
||||
height: 84upx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 38upx;
|
||||
&.active {
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
&::after {
|
||||
content: '';
|
||||
width: 8upx;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
.t {
|
||||
font-size: 32upx;
|
||||
}
|
||||
}
|
||||
.goods-item {
|
||||
height: 84upx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 28upx;
|
||||
.name {
|
||||
.t {
|
||||
font-size: 32upx;
|
||||
}
|
||||
}
|
||||
.selec-btn {
|
||||
$size: 32upx;
|
||||
width: $size;
|
||||
height: $size;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.circle {
|
||||
width: $size;
|
||||
height: $size;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer {
|
||||
padding: 28upx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user