测试环境链接替换，部分问题修复，增加批量退菜功能
This commit is contained in:
297
pageUser/index/components/give-coupon.vue
Normal file
297
pageUser/index/components/give-coupon.vue
Normal file
@@ -0,0 +1,297 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user