cashier_app/components/my-components/my-select-coupon.vue

<template>
	<view class="">
		<view @click="show = true">
			<slot v-if="$slots.default"></slot>
			<view v-else class="choose-goods u-flex u-row-between">
				<text class="color-999" v-if="!modelValue">请选择商品</text>
				<text class="color-333 u-m-r-32 u-line-1" v-else>{{ goodsName }}</text>
				<up-icon size="14" name="arrow-down"></up-icon>
			</view>
		</view>
		<up-popup :show="show" :round="20" mode="bottom">
			<view class="">
				<view class="top u-flex u-row-between">
					<text class="font-bold u-font-32 color-333">{{ title }}</text>
					<up-icon size="18" name="close" @click="show = false"></up-icon>
				</view>
				<scroll-view :scroll-y="true" style="max-height: 50vh" @scroll="scroll" :scroll-top="scrollTop">
					<view v-for="(item, index) in list" :key="index" class="item" @click="itemClick(item)" :class="[selGoods && selGoods.id == item.id ? 'selected' : '']">
						<view class="u-flex u-row-between">
							<view class="u-flex gap-20">
								<!-- <view class="u-flex" @click.stop="preview(item)">
									<up-image :src="item.coverImg" width="80rpx" height="80rpx"></up-image>
								</view> -->
								<text class="u-font-32 color-333">{{ item.title }}</text>
							</view>
							<!-- <text class="u-font-32 color-red u-p-l-30">¥{{ item.lowPrice }}</text> -->
						</view>
					</view>
				</scroll-view>
				<view class="bottom">
					<view class="btn cancel" @click="close">{{ cancelText }}</view>
					<view class="btn success" @click="confirm">{{ confirmText }}</view>
				</view>
			</view>
		</up-popup>
	</view>
</template>
<script setup>
import { ref, onMounted, watch } from 'vue';
import { couponPage } from '@/http/api/market/index.js';
const show = ref(false);
const modelValue = defineModel({
	type: String,
	default: ''
});

const goodsName = defineModel('goodsName', {
	type: String,
	default: ''
});

const props = defineProps({
	title: {
		type: String,
		default: '选择优惠券'
	},
	confirmText: {
		type: String,
		default: '确认'
	},
	cancelText: {
		type: String,
		default: '取消'
	}
});

const selGoods = ref('');
function itemClick(item) {
	if (selGoods.value && selGoods.value.id == item.id) {
		selGoods.value = '';
		return;
	}
	selGoods.value = item;
}
const list = ref([]);

const scrollTop = ref(0);
function scroll(e) {
	scrollTop.value = e.detail.scrollTop;
}
function preview(item) {
	uni.previewImage({
		urls: item.images || [item.coverImg]
	});
}
watch(
	() => modelValue.value,
	(newVal, oldVal) => {
		console.log(newVal, oldVal);
		selGoods.value = list.value.find((item) => item.id == newVal);
		console.log(selGoods.value);
		if (selGoods.value) {
			goodsName.value = selGoods.value.title;
		}
	}
);

watch(
	() => list.value.length,
	(newVal, oldVal) => {
		selGoods.value = list.value.find((item) => item.id == modelValue.value);
		console.log(selGoods.value);
		if (selGoods.value) {
			modelValue.value = selGoods.value.id;
			goodsName.value = selGoods.value.title;
		}
	}
);

function close() {
	show.value = false;
}
function confirm() {
	if (!selGoods.value) {
		uni.showToast({
			title: '请选择优惠券',
			icon: 'none'
		});
		return;
	}
	modelValue.value = selGoods.value.id;
	show.value = false;
}

const emits = defineEmits(['load']);

onMounted(() => {
	couponPage({ page: 1, size: 500 }).then((res) => {
		list.value = res.records;
		emits('load', list.value);
	});
});
</script>

<style lang="scss">
.popup-content {
	background: #fff;
	width: 640rpx;
	border-radius: 18rpx;
}
.top {
	padding: 40rpx 48rpx;
	border-bottom: 1px solid #d9d9d9;
}
.bottom {
	padding: 48rpx 52rpx;
	display: flex;
	justify-content: space-between;
	border-top: 1px solid #d9d9d9;
	gap: 50rpx;
	.btn {
		flex: 1;
		text-align: center;
		padding: 18rpx 60rpx;
		border-radius: 100rpx;
		font-size: 32rpx;
		border: 2rpx solid transparent;
		&.success {
			background-color: $my-main-color;
			color: #fff;
		}
		&.cancel {
			border-color: #d9d9d9;
			box-shadow: 0 4rpx 0 0 #00000005;
		}
	}
}
.item {
	padding: 10rpx 30rpx;
	border: 1px solid #d9d9d9;
	margin: 10rpx;
	border-radius: 8rpx;
	transition: all 0.3s ease-in-out;
	box-shadow: 0 0 10px transparent;
	&.selected {
		border-color: $my-main-color;
		box-shadow: 0 0 10px $my-main-color;
	}
}
.choose-goods {
	display: flex;
	padding: 24rpx;
	align-items: center;
	border-radius: 8rpx;
	border: 2rpx solid #d9d9d9;
	background: #fff;
	font-size: 28rpx;
	font-weight: 400;
}
</style>