新增商品拼团模块

This commit is contained in:
gyq
2025-12-18 14:49:56 +08:00
parent a20379890e
commit 8826b206df
12 changed files with 3110 additions and 5 deletions

View File

@@ -0,0 +1,286 @@
<template>
<view class="container">
<view class="search-wrap" :style="{ top: `${top}px` }">
<view class="ipt">
<u-input
placeholder="请输入商品名称"
suffixIcon="search"
shape="circle"
clearable
v-model="queryForm.wareName"
@confirm="getGbWarePageAjax(1)"
@clear="getGbWarePageAjax(1)"
></u-input>
</view>
<div class="ipt" @click="showStatusSheet = true">
<u-input placeholder="上架状态" readonly v-model="queryForm.onlineStatusLabel" suffixIcon="arrow-down"></u-input>
</div>
</view>
<view class="list">
<view class="item" v-for="item in listData.list" :key="item.id">
<view class="header">
<text class="t1">成团人数{{ item.groupPeopleNum }}</text>
<text class="t1">成团期限小时{{ item.groupTimeoutHour }}</text>
</view>
<view class="goods-info">
<view class="img-wrap">
<image class="img" :src="item.wareImgs.split(',')[0]" mode="aspectFill"></image>
</view>
<view class="info">
<text class="t1">{{ item.wareName }}</text>
<text class="t1">原价{{ item.originalPrice }}</text>
<text class="t1">拼团价{{ item.groupPrice }}</text>
</view>
<view class="status">
<view class="row">
<u-switch v-model="item.onlineStatus" :active-value="1" :inactive-value="0" @change="onlineStatusChange($event, item)"></u-switch>
</view>
<text class="t1">
<template v-if="item.onlineStatus">下架</template>
<template v-else>上架</template>
</text>
</view>
</view>
<view class="footer-wrap">
<template v-if="!item.onlineStatus">
<view class="btn">
<u-button shape="circle" @click="delHandle(item)">删除</u-button>
</view>
<view class="btn">
<u-button type="primary" shape="circle" @click="editorHandle(item)">编辑</u-button>
</view>
</template>
<template v-else>
<view class="btn" style="width: 150px">
<u-button shape="circle">下架后编辑/删除</u-button>
</view>
</template>
</view>
</view>
</view>
<u-loadmore :status="listData.status"></u-loadmore>
<u-action-sheet
:actions="[
{ name: '全部', value: '' },
{ name: '上架', value: 1 },
{ name: '下架', value: 0 }
]"
title="上架状态"
:show="showStatusSheet"
cancelText="取消"
@close="showStatusSheet = false"
@select="sheetConfirm"
></u-action-sheet>
</view>
</template>
<script setup>
import { onMounted, reactive, ref } from 'vue';
import { getGbWarePage, editOnlineStatus, deleteGbWare } from '@/http/api/ware.js';
const props = defineProps({
top: {
type: Number,
default: 0
}
});
const showStatusSheet = ref(false);
const queryForm = reactive({
wareName: '',
onlineStatusLabel: '',
onlineStatus: ''
});
// 选择状态
function sheetConfirm(e) {
queryForm.onlineStatusLabel = e.name;
queryForm.onlineStatus = e.value;
getGbWarePageAjax(1);
}
const listData = reactive({
page: 1,
size: 10,
status: 'loading',
list: []
});
function reachBottom() {
if (listData.status != 'nomore') {
listData.page++;
getGbWarePageAjax();
}
}
// 改变状态
async function onlineStatusChange(e, item) {
try {
const res = await editOnlineStatus({
id: item.id,
onlineStatus: item.onlineStatus
});
} catch (error) {
console.log(error);
item.onlineStatus = !item.onlineStatus;
}
}
// 删除
async function delHandle(item) {
uni.showModal({
title: '注意',
content: `确定要删除${item.wareName}商品吗?`,
success: async (res) => {
try {
if (res.confirm) {
uni.showLoading({
title: '删除中...',
mask: true
});
const res = await deleteGbWare(item.id);
let index = listData.list.findIndex((val) => val.id == item.id);
listData.list.splice(index, 1);
}
} catch (error) {
console.log(error);
}
uni.hideLoading();
}
});
}
// 编辑
function editorHandle(item) {
uni.setStorageSync('groupGoods', item);
uni.navigateTo({
url: '/pageMarket/groupGoods/addGoods?type=editor'
});
}
// 拼团商品-列表
async function getGbWarePageAjax(page = listData.page, isPull = false) {
try {
const res = await getGbWarePage({
page: page,
size: listData.size,
...queryForm
});
if (listData.page == 1) {
listData.list = res.records;
} else {
listData.list.push(...res.records);
}
if (res.pageNumber >= res.totalPage) {
listData.status = 'nomore';
}
} catch (error) {
console.log(error);
}
if (isPull) {
setTimeout(() => {
uni.showToast({
title: '刷新成功',
icon: 'none'
});
uni.stopPullDownRefresh();
}, 300);
}
}
defineExpose({
reachBottom,
getGbWarePageAjax
});
onMounted(() => {
getGbWarePageAjax();
});
</script>
<style scoped lang="scss">
.container {
padding-top: 50px;
}
.search-wrap {
display: flex;
align-items: center;
gap: 28upx;
width: 100%;
height: 50px;
position: fixed;
left: 0;
background-color: #fff;
z-index: 999;
padding: 0 28upx;
.ipt {
flex: 1;
}
}
.list {
padding-bottom: 28upx;
.item {
background-color: #fff;
border-radius: 20upx;
padding: 28upx;
&:not(:first-child) {
margin-top: 28upx;
}
.header {
display: flex;
justify-content: space-between;
.t1 {
font-size: 28upx;
color: #666;
}
}
.goods-info {
display: flex;
align-items: center;
padding: 28upx 0;
.img-wrap {
$size: 160upx;
position: relative;
width: $size;
height: $size;
.img {
width: 100%;
height: 100%;
border-radius: 8upx;
}
}
.info {
flex: 1;
display: flex;
flex-direction: column;
padding: 0 28upx;
gap: 4px;
.t1 {
font-size: 28upx;
color: #333;
}
}
.status {
display: flex;
align-items: center;
flex-direction: column;
gap: 4px;
.t1 {
font-size: 28upx;
color: #333;
}
}
}
.footer-wrap {
display: flex;
justify-content: flex-end;
gap: 28upx;
.btn {
width: 140upx;
}
}
}
}
</style>

View File

@@ -0,0 +1,519 @@
<template>
<view class="container">
<view class="search-wrap" :style="{ top: `${top}px` }">
<view class="top">
<view class="ipt">
<u-input
placeholder="请输入订单号"
prefixIcon="search"
shape="circle"
clearable
v-model="queryForm.orderNo"
@confirm="gbOrderPageAjax(1)"
@clear="gbOrderPageAjax(1)"
></u-input>
</view>
<div class="ipt" @click="dateRef.open()">
<u-input placeholder="支付时间范围" readonly v-model="time" suffixIcon="arrow-down"></u-input>
</div>
</view>
<view class="tab-wrap">
<view class="item" :class="{ active: statusActive == index }" v-for="(item, index) in tabs" :key="index" @click="tabChange(index)">
<text class="t">{{ item.label }}</text>
</view>
</view>
</view>
<view class="list">
<view class="item" v-for="item in listData.list" :key="item.id">
<view class="header">
<view class="left">
<text class="t1">订单号{{ item.orderNo }}</text>
<text class="t1">团单号{{ item.groupOrderNo }}</text>
</view>
<view class="status">
<u-tag plain plainFill :type="statusFilter(item.status).type">{{ item.status }}</u-tag>
</view>
</view>
<view class="user-info">
<text class="t1">用户{{ item.userName }} {{ item.userPhone }}</text>
<text class="t2">核销码{{ item.verifyCode }}</text>
</view>
<view class="goods-info">
<image class="img" :src="item.wareJson.wareImgs.split(',')[0]" mode="aspectFill"></image>
<view class="info">
<view class="left">
<text class="t1">{{ item.wareJson.wareName }}</text>
<text class="t1">x{{ item.num }}</text>
</view>
<view class="price">
<text class="t1">{{ item.payAmount }}</text>
</view>
</view>
</view>
<view class="time-wrap">
<text class="t">下单时间{{ item.createTime }}</text>
<text class="t" v-if="item.verifyTime">核销时间{{ item.verifyTime }}</text>
</view>
<view class="footer-wrap">
<view class="btn">
<u-button shape="circle" style="width: 100%" v-if="includesString(item.status, '退款中')" @click="showRefundPopupHandle(item)">审核</u-button>
</view>
<view class="btn" v-if="includesString(item.status, '待核销') || includesString(item.status, '待成团')">
<u-button shape="circle" style="width: 100%" @click="refundHandle(item)">退款</u-button>
</view>
<view class="btn" v-if="includesString(item.status, '待核销')">
<u-button type="primary" shape="circle" style="width: 100%" @click="checkoutHandle(item)">核销</u-button>
</view>
</view>
</view>
</view>
<u-loadmore :status="listData.status"></u-loadmore>
<my-date-pickerview ref="dateRef" @confirm="dateConfirmHandle"></my-date-pickerview>
<u-popup :show="showRefundPopup" :round="20" mode="bottom" closeable @close="showRefundPopup = false">
<view class="refund-popup-content">
<view class="refund-popup-title">
<text class="t">退款审核</text>
</view>
<view class="form">
<u-form :model="refundForm" label-width="70" label-position="left">
<u-form-item label="是否同意">
<u-radio-group v-model="refundForm.type">
<u-radio label="同意" :name="1" :customStyle="{ marginRight: '15px' }"></u-radio>
<u-radio label="驳回" :name="0"></u-radio>
</u-radio-group>
</u-form-item>
<u-form-item label="驳回原因" v-if="refundForm.type === 0">
<u-textarea type="textarea" v-model="refundForm.reason" placeholder="请输入驳回原因"></u-textarea>
</u-form-item>
</u-form>
</view>
<view class="dialog-footer">
<view class="btn">
<u-button @click="showRefundPopup = false" shape="circle" style="width: 100%">取消</u-button>
</view>
<div class="btn">
<u-button type="primary" shape="circle" @click="returnCostConfirmHandle" :loading="refundLoading" style="width: 100%">确认</u-button>
</div>
</view>
</view>
</u-popup>
</view>
</template>
<script setup>
import dayjs from 'dayjs';
import { ref, reactive, onMounted } from 'vue';
import { includesString } from '@/utils/index.js';
import { gbOrderPage, agreeRefund, rejectRefund, checkout } from '@/http/api/ware.js';
const dateRef = ref(null);
const props = defineProps({
top: {
type: Number,
default: 0
}
});
const time = ref('');
const queryForm = reactive({
status: '',
orderNo: '',
orderStartTime: '',
orderEndTime: ''
});
// 确认选择时间
function dateConfirmHandle(e) {
queryForm.orderStartTime = e.start;
queryForm.orderEndTime = e.end;
time.value = e.text;
gbOrderPageAjax(1);
}
const statusActive = ref(0);
const tabs = ref([
{
value: '',
label: '全部'
},
{
value: '待成团',
label: '待成团'
},
{
value: '待核销',
label: '待核销'
},
{
value: '已核销',
label: '已核销'
},
{
value: '退款中',
label: '退款'
}
]);
const statusList = ref([
{
value: '待支付',
type: 'info'
},
{
value: '待核销',
type: 'warning'
},
{
value: '待成团',
type: 'warning'
},
{
value: '已核销',
type: 'info'
},
{
value: '退款中',
type: 'danger'
},
{
value: '已退款',
type: 'info'
}
]);
// 过滤状态
function statusFilter(status) {
let obj = statusList.value.find((item) => item.value == status);
if (obj) {
return obj;
} else {
return {
value: status,
type: 'info'
};
}
}
function tabChange(index) {
statusActive.value = index;
listData.page = 1;
queryForm.status = tabs.value[index].value;
gbOrderPageAjax();
}
const listData = reactive({
page: 1,
size: 10,
status: 'loading',
list: []
});
// 滚动到底部,方法需要暴露给父级
function reachBottom() {
if (listData.status != 'nomore') {
listData.page++;
gbOrderPageAjax();
}
}
// 退款
function refundHandle(item) {
uni.showModal({
title: '注意',
content: `确定要给[${item.userName}/${item.userPhone}]退款吗?`,
success: async (res) => {
try {
if (res.confirm) {
uni.showLoading({
title: '退款中...'
});
const res = await agreeRefund({
recordId: item.id,
orderNo: item.orderNo,
reason: ''
});
setTimeout(() => {
uni.showToast({
title: '退款成功',
icon: 'none'
});
}, 100);
goodsRecordPageAjax(1);
}
} catch (error) {
uni.hideLoading();
}
}
});
}
// 退款popup
const refundLoading = ref(false);
const showRefundPopup = ref(false);
const refundForm = ref({
type: 1,
recordId: '',
orderNo: '',
reason: ''
});
// 显示退款popup
function showRefundPopupHandle(item) {
showRefundPopup.value = true;
refundForm.value.recordId = item.id;
refundForm.value.orderNo = item.orderNo;
}
// 退款操作
async function returnCostConfirmHandle() {
try {
refundLoading.value = true;
if (refundForm.value.type == 1) {
// 同意
await agreeRefund(refundForm.value);
} else {
// 驳回
await rejectRefund(refundForm.value);
}
showRefundPopup.value = false;
setTimeout(() => {
uni.showToast({
title: '操作成功',
icon: 'none'
});
}, 100);
goodsRecordPageAjax(1);
} catch (error) {
console.log(error);
}
refundLoading.value = false;
}
// 核销操作
async function checkoutHandle(item) {
uni.showModal({
title: '注意',
content: '确认要核销吗?',
success: async (res) => {
try {
uni.showLoading({
title: '核销中...',
mask: true
});
await checkout(item.verifyCode);
setTimeout(() => {
uni.showToast({
title: '已核销',
icon: 'none'
});
}, 100);
item.status = '已核销';
item.verifyTime = dayjs().format('YYYY-MM-DD HH:mm:ss');
} catch (error) {
console.log(error);
}
uni.hideLoading();
}
});
}
// 获取拼团商品:订单列表
async function gbOrderPageAjax(page = listData.page, isPull = false) {
try {
const res = await gbOrderPage({
page: page,
size: listData.size,
...queryForm
});
res.records.forEach((item) => {
item.wareJson = JSON.parse(item.wareJson);
});
if (listData.page == 1) {
listData.list = res.records;
} else {
listData.list.push(...res.records);
}
if (res.pageNumber >= res.totalPage) {
listData.status = 'nomore';
}
} catch (error) {
console.log(error);
}
}
defineExpose({
reachBottom,
gbOrderPageAjax
});
onMounted(() => {
gbOrderPageAjax();
});
</script>
<style scoped lang="scss">
.container {
padding-top: 100px;
}
.search-wrap {
width: 100%;
height: 100px;
position: fixed;
left: 0;
background-color: #fff;
z-index: 999;
.top {
height: 50px;
display: flex;
align-items: center;
gap: 28upx;
padding: 0 28upx;
.ipt {
flex: 1;
}
}
.tab-wrap {
height: 50px;
display: flex;
padding: 0 28upx;
.item {
--activeColor: #318afe;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
&.active {
position: relative;
&::after {
content: '';
width: 100%;
border-bottom: 1px solid var(--activeColor);
position: absolute;
bottom: 8px;
left: 0;
}
.t {
color: var(--activeColor);
}
}
.t {
font-size: 28upx;
color: #333;
}
}
}
}
.list {
padding-bottom: 28upx;
.item {
background-color: #fff;
border-radius: 20upx;
padding: 28upx;
&:not(:first-child) {
margin-top: 28upx;
}
.header {
display: flex;
align-items: center;
gap: 28upx;
.left {
flex: 1;
display: flex;
flex-direction: column;
.t1 {
color: #999;
font-size: 28upx;
}
}
}
.user-info {
display: flex;
margin-top: 20upx;
justify-content: space-between;
.t1 {
font-size: 28upx;
color: #666;
}
.t2 {
font-size: 28upx;
color: #333;
}
}
.goods-info {
display: flex;
margin-top: 20upx;
.img {
$size: 90upx;
width: $size;
height: $size;
border-radius: 8upx;
}
.info {
flex: 1;
display: flex;
align-items: center;
.left {
flex: 1;
display: flex;
flex-direction: column;
padding: 0 20upx;
.t1 {
font-size: 28upx;
color: #333;
}
}
.price {
.t1 {
font-size: 32upx;
color: #333;
font-weight: bold;
}
}
}
}
.time-wrap {
display: flex;
flex-direction: column;
margin-top: 20upx;
.t {
font-size: 24upx;
color: #999999;
}
}
.footer-wrap {
display: flex;
justify-content: flex-end;
padding-top: 20upx;
gap: 28upx;
.btn {
width: 180upx;
}
}
}
}
.refund-popup-content {
padding: 0 28upx;
.refund-popup-title {
padding: 28upx;
display: flex;
justify-content: center;
.t {
font-size: 32upx;
color: #333;
font-weight: bold;
}
}
.form {
padding: 28upx;
}
.dialog-footer {
display: flex;
gap: 28upx;
.btn {
flex: 1;
}
}
}
</style>