cashier_app/pageUser/index/components/give-coupon.vue

<template>
	<view>
		<!-- 赠送优惠券弹窗 -->
		<up-popup :show="visible" mode="center" :safe-area-inset-bottom="true">
			<view class="popup-container">
				<!-- 头部 -->
				<view class="popup-header">
					<text class="title">赠送优惠券</text>
					<up-icon name="close" @click="close" size="20"></up-icon>
				</view>

				<!-- 内容 -->
				<view class="popup-body">
					<!-- 用户信息 -->
					<view class="user-info" v-if="user">
						<up-avatar :src="user.avatar || ''" text="用户" size="80rpx" shape="square"></up-avatar>
						<view class="ml-20">
							<view class="nickname">{{ user.nickName || '用户' }}</view>
							<view class="text-gray">ID: {{ user.userId }}</view>
							<view class="text-gray mt-1">手机号: {{ user.phone || '未填写' }}</view>
						</view>
					</view>

					<!-- 选择优惠券 -->
					<view class="form-item" @click="openCouponSelect">
						<text class="label">选择优惠券</text>
						<view class="item-right">
							<text :class="couponTextClass">{{ couponName || '请选择优惠券' }}</text>
							<up-icon name="arrow-right"></up-icon>
						</view>
					</view>

					<!-- 数量 -->
					<view class="form-item">
						<text class="label">数量</text>
						<view class="item-right">
							<up-number-box v-model="form.num" :min="1" :step="1"></up-number-box>
							<text class="ml-2">张</text>
						</view>
					</view>
				</view>

				<!-- 底部按钮 -->
				<view class="popup-footer">
					<up-button plain @click="close">取消</up-button>
					<up-button type="primary" :loading="loading" @click="submit">提交</up-button>
				</view>
			</view>
		</up-popup>

		<!-- 优惠券选择弹窗 -->
		<up-popup :show="couponShow" mode="bottom" >
			<view class="popup-header">
				<text class="title">选择优惠券</text>
				<up-icon name="close" @click="couponShow=false" size="20"></up-icon>
			</view>
			<scroll-view scroll-y class="select-content">
				<view class="select-item" v-for="item in couponList" :key="item.id" @click="selectCoupon(item)">
					<text>{{ item.title }}</text>
					<up-icon name="check" v-if="form.couponId === item.id" color="#2d7cf3"></up-icon>
				</view>
			</scroll-view>
		</up-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'
	import * as couponApi from '@/http/api/market/coupon.js'

	const emits = defineEmits(['success'])

	// 弹窗显示
	const visible = ref(false)
	// 优惠券选择弹窗
	const couponShow = ref(false)

	// 用户信息
	const user = ref(null)

	// 表单
	const form = reactive({
		userId: '',
		couponId: '',
		num: 1,
	})

	// 优惠券列表
	const couponList = ref([])
	const couponName = ref('')
	const loading = ref(false)

	// 打开弹窗
	function open(data) {
		user.value = data
		form.userId = data.userId
		visible.value = true
	}

	// 关闭弹窗
	function close() {
		visible.value = false
		reset()
	}

	// 重置
	function reset() {
		form.userId = ''
		form.couponId = ''
		form.num = 1
		couponName.value = ''
		user.value = null
	}

	// 打开选择优惠券
	function openCouponSelect() {
		couponShow.value = true
	}

	// 选择优惠券
	function selectCoupon(item) {
		form.couponId = item.id
		couponName.value = item.title
		couponShow.value = false
	}

	// 提交赠送
	async function submit() {
		if (!form.couponId) {
			uni.showToast({
				title: '请选择优惠券',
				icon: 'none'
			})
			return
		}
		if (form.num <= 0) {
			uni.showToast({
				title: '数量不能小于1',
				icon: 'none'
			})
			return
		}

		try {
			loading.value = true
			const res = await couponApi.giveCoupon(form)
			if (res) {
				uni.showToast({
					title: '赠送成功',
					icon: 'success'
				})
				emits('success')
				close()
			}
		} catch (err) {
			uni.showToast({
				title: '赠送失败',
				icon: 'none'
			})
		} finally {
			loading.value = false
		}
	}

	// 加载优惠券列表
	onMounted(() => {
		couponApi.getList({
			size: 999
		}).then((res) => {
			couponList.value = res.records || []
		})
	})

	// 样式判断
	const couponTextClass = ref((val) => {
		return form.couponId ? 'text-primary' : 'text-gray'
	})

	defineExpose({
		open,
		close
	})
</script>

<style scoped lang="scss">
	.popup-container {
		display: flex;
		flex-direction: column;
		background: #fff;
		border-radius: 36rpx;
		min-width: 690rpx;
	}

	.popup-header {
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid #eee;

		.title {
			font-size: 32rpx;
			font-weight: bold;
		}
	}

	.popup-body {
		flex: 1;
		padding: 30rpx;
		overflow: auto;
	}

	.user-info {
		display: flex;
		align-items: center;
		margin-bottom: 40rpx;

		.nickname {
			font-size: 30rpx;
			font-weight: 500;
		}

		.text-gray {
			font-size: 24rpx;
			color: #999;
		}
	}

	.form-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #f5f5f5;

		.label {
			font-size: 28rpx;
			color: #333;
		}

		.item-right {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			color: #666;
		}
	}

	.popup-footer {
		padding: 20rpx 30rpx;
		border-top: 1rpx solid #eee;
		display: flex;
		gap: 20rpx;
	}

	/* 优惠券选择 */
	.select-header {
		padding: 30rpx;
		text-align: center;
		font-weight: bold;
		font-size: 32rpx;
		border-bottom: 1rpx solid #eee;
	}

	.select-content {
		height: calc(100% - 100rpx);
	}

	.select-item {
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid #f5f5f5;
		font-size: 28rpx;
	}

	.ml-20 {
		margin-left: 20rpx;
	}

	.ml-2 {
		margin-left: 10rpx;
	}

	.text-gray {
		color: #999;
	}

	.text-primary {
		color: #2d7cf3;
	}
</style>