544 lines
12 KiB
Vue
544 lines
12 KiB
Vue
<template>
|
||
<view class="service-page">
|
||
<custom-navbar
|
||
title="拼团管理"
|
||
:showBack="true"
|
||
backgroundColor="#FFFFFF"
|
||
></custom-navbar>
|
||
<view class="flexed">
|
||
<!-- 搜索框 -->
|
||
<view class="headerBox">
|
||
<view class="search-box">
|
||
<input
|
||
type="text"
|
||
class="search-inp"
|
||
placeholder="拼团活动名称"
|
||
placeholder-class="placeholder"
|
||
@confirm="getServicesList"
|
||
v-model="title"
|
||
/>
|
||
<image
|
||
src="/static/home/search.png"
|
||
class="search-icon"
|
||
mode="aspectFit"
|
||
@click="getServicesList"
|
||
>
|
||
</image>
|
||
</view>
|
||
<view class="addBox" @click="addGroup">
|
||
<image class="addIcon" src="@/static/images/icons/pinTuan.png" />
|
||
<text class="addText">添加拼团</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 状态标签 -->
|
||
<view class="tab-container">
|
||
<view
|
||
v-for="(tab, index) in tabs"
|
||
:key="index"
|
||
:class="['tab-item', { active: currentTab === index }]"
|
||
@click="switchTab(index, tab.id)"
|
||
>
|
||
{{ tab.text }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="service-list" v-if="services.length != 0 || !services">
|
||
<listCard
|
||
:info="item"
|
||
class="service-list-item"
|
||
v-for="(item, index) in services"
|
||
:key="index"
|
||
@cancel="cancelGroup"
|
||
@edit="addGroup"
|
||
@copy="copyGroup"
|
||
@check="checkGroup"
|
||
></listCard>
|
||
</view>
|
||
<tipsPopup
|
||
@okBtn="showCancel"
|
||
:show="showTip"
|
||
@closePopup="showTip = false"
|
||
:sureText="'确定'"
|
||
>
|
||
<text v-if="tipsState == 6"
|
||
>您当前操作为<text style="color: #E8101E">结束拼团活动</text
|
||
>，根据平台规则，此操作需提交平台审核（审核通过后方可生效），请问您是否确认发起该申请？</text
|
||
>
|
||
<text v-else
|
||
>您当前操作为<text style="color: #E8101E">结束拼团活动</text
|
||
>，请问您是否确认此操作吗？</text
|
||
>
|
||
</tipsPopup>
|
||
<tipsPopup
|
||
@okBtn="setCancelGroup"
|
||
:show="showCancelGroup"
|
||
@closePopup="showCancelGroup = false"
|
||
:sureText="'确定'"
|
||
:title="'结束原因'"
|
||
v-if="selectItem"
|
||
>
|
||
<view class="mrrCanceltextarea" v-if="selectItem.expire_back_text">
|
||
<text class="mrrCanceltextarea-title">平台回复：</text>
|
||
<text class="mrrCanceltextarea-text" v-if="selectItem.state==6">{{ selectItem.expire_back_text }}</text>
|
||
</view>
|
||
<view class="canceltextarea">
|
||
<textarea
|
||
class="canceltextarea__textarea"
|
||
v-model="reasonValue"
|
||
placeholder="请输入提前结束的原因"
|
||
></textarea>
|
||
</view>
|
||
</tipsPopup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import tipsPopup from "components/tips-popup/tips-popup2.vue";
|
||
import request from "@/utils/request";
|
||
import listCard from "./components/listCard.vue";
|
||
export default {
|
||
data() {
|
||
return {
|
||
selectItem: null, //选择的拼团id
|
||
reasonValue: "", //结束原因
|
||
title: "",
|
||
state: 5,
|
||
page: 1,
|
||
limit: 10,
|
||
currentTab: 0,
|
||
showTip: false,
|
||
tipsState: null,
|
||
showCancelGroup: false,
|
||
tabs: [
|
||
{
|
||
id: 5,
|
||
text: "未开始",
|
||
},
|
||
{
|
||
id: 6,
|
||
text: "进行中",
|
||
},
|
||
{
|
||
id: 7,
|
||
text: "已结束",
|
||
},
|
||
{
|
||
id: 3,
|
||
text: "已失效",
|
||
},
|
||
{
|
||
id: 1,
|
||
text: "审核中",
|
||
},
|
||
{
|
||
id: 4,
|
||
text: "已驳回",
|
||
},
|
||
],
|
||
isLoad: true, //加载完成
|
||
services: [],
|
||
count:0
|
||
};
|
||
},
|
||
components: {
|
||
listCard,
|
||
tipsPopup,
|
||
},
|
||
onLoad() {
|
||
this.getServicesList();
|
||
},
|
||
onPullDownRefresh() {
|
||
this.getServicesList();
|
||
},
|
||
async onReachBottom() {
|
||
console.log("onReachBottom");
|
||
if (this.count <= this.page * this.limit || !this.isLoad) {
|
||
return
|
||
}
|
||
this.page++;
|
||
this.getServicesList(false);
|
||
},
|
||
methods: {
|
||
addGroup(e) {
|
||
uni.navigateTo({
|
||
url: `/pages/shop/groupBuying/addGroupBuying?dateItem=${encodeURIComponent(
|
||
JSON.stringify(e)
|
||
)}&title=编辑活动`,
|
||
});
|
||
},
|
||
copyGroup(e) {
|
||
uni.navigateTo({
|
||
url: `/pages/shop/groupBuying/addGroupBuying?dateItem=${encodeURIComponent(
|
||
JSON.stringify(e)
|
||
)}&title=复制活动`,
|
||
});
|
||
},
|
||
checkGroup(e){
|
||
uni.navigateTo({
|
||
url: `/pages/shop/groupBuying/addGroupBuying?dateItem=${encodeURIComponent(
|
||
JSON.stringify(e)
|
||
)}&disabled=1&title=活动详情`,
|
||
});
|
||
},
|
||
setCancelGroup() {
|
||
let formData = {
|
||
id: this.selectItem.id,
|
||
expire_text: this.reasonValue,
|
||
};
|
||
request
|
||
.post("/sj/teamBuy/expire", formData)
|
||
.then((res) => {
|
||
console.log(res);
|
||
if (res.code == 200) {
|
||
uni.showToast({
|
||
title: "提交成功成功",
|
||
icon: "success",
|
||
});
|
||
this.getServicesList();
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: "none",
|
||
});
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
uni.showToast({
|
||
title: "网络异常，请稍后再试",
|
||
icon: "none",
|
||
});
|
||
})
|
||
.finally(() => {
|
||
this.isSubmit = false;
|
||
this.reasonValue = ""
|
||
});
|
||
},
|
||
showCancel() {
|
||
this.showTip = false;
|
||
//不是进行中直接取消
|
||
if( this.selectItem.state != 6 ){
|
||
this.setCancelGroup();
|
||
return;
|
||
}
|
||
this.showCancelGroup = true;
|
||
},
|
||
switchTab(index, id) {
|
||
this.currentTab = index;
|
||
this.state = id;
|
||
this.getServicesList();
|
||
},
|
||
addService() {},
|
||
cancelGroup(e) {
|
||
console.log("当前拼团", e);
|
||
this.selectItem = e;
|
||
this.tipsState = e.state;
|
||
this.showTip = true;
|
||
},
|
||
getServicesList(isRefresh = true) {
|
||
this.isLoad = false;
|
||
if (isRefresh) {
|
||
this.page = 1;
|
||
this.limit = 10;
|
||
}
|
||
let url = "/sj/teamBuy/list";
|
||
request
|
||
.post(url, {
|
||
state: this.state,
|
||
title: this.title,
|
||
page: this.page,
|
||
limit: this.limit,
|
||
})
|
||
.then((res) => {
|
||
if (isRefresh) {
|
||
this.services = res.data.list;
|
||
this.count = res.data.count;
|
||
} else {
|
||
this.services = [...this.services, ...res.data.list];
|
||
this.count = res.data.count;
|
||
}
|
||
|
||
})
|
||
.finally(() => {
|
||
this.isLoad = true;
|
||
uni.stopPullDownRefresh();
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.mrrCanceltextarea {
|
||
background: #f4f5f7;
|
||
border-radius: 20rpx;
|
||
padding: 30rpx 0rpx 30rpx 30rpx;
|
||
margin-bottom: 30rpx;
|
||
display: flex;
|
||
&-title {
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #adadad;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
&-text {
|
||
flex: 1;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
/* 1. 必须：限制容器宽度（否则文本不会换行，省略号不触发） */
|
||
width: 100%; /* 可替换为固定宽度，如 300px、20rem */
|
||
|
||
/* 2. 多行省略核心属性 */
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 3; /* 最多 3 行 */
|
||
-webkit-box-orient: vertical;
|
||
|
||
/* 可选：优化文本排版（根据需求调整） */
|
||
line-height: 1.5; /* 行高，控制两行文本的总高度 */
|
||
word-break: break-all; /* 处理长单词/无空格文本换行（避免单行超出） */
|
||
}
|
||
}
|
||
.canceltextarea {
|
||
height: 125rpx;
|
||
width: 430rpx;
|
||
padding: 30rpx;
|
||
background: #f4f5f7;
|
||
border-radius: 20rpx;
|
||
|
||
&__textarea {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.uni-textarea-placeholder {
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #adadad;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
.service-page {
|
||
padding-bottom: 30rpx;
|
||
}
|
||
|
||
/* 搜索框样式 */
|
||
.search-box {
|
||
// width: 750rpx;
|
||
width: 100%;
|
||
background-color: #ffffff;
|
||
border-radius: 8rpx;
|
||
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
}
|
||
|
||
.flexed {
|
||
position: sticky;
|
||
top: 88rpx;
|
||
left: 0;
|
||
z-index: 999;
|
||
}
|
||
|
||
.search-inp {
|
||
// width: 700rpx;
|
||
width: 100%;
|
||
height: 68rpx;
|
||
background-color: #f4f5f7;
|
||
border-radius: 34rpx;
|
||
padding: 0 70rpx 0 82rpx;
|
||
font-size: 28rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.placeholder {
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #cccccc;
|
||
line-height: 34rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.search-icon {
|
||
width: 34rpx;
|
||
height: 34rpx;
|
||
position: absolute;
|
||
left: 30rpx;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
}
|
||
|
||
/* 标签栏样式 */
|
||
.tab-container {
|
||
display: flex;
|
||
flex-flow: row nowrap;
|
||
align-items: center;
|
||
// justify-content: space-between;
|
||
column-gap: 48rpx;
|
||
background-color: #fff;
|
||
padding: 30rpx 0rpx 20rpx 30rpx;
|
||
box-sizing: border-box;
|
||
-webkit-overflow-scrolling: touch;
|
||
overflow-x: scroll;
|
||
}
|
||
|
||
.tab-item {
|
||
text-align: center;
|
||
font-size: 30rpx;
|
||
color: #666666;
|
||
padding: 16rpx 0;
|
||
white-space: nowrap; /* 核心：禁止自动换行 */
|
||
position: relative;
|
||
}
|
||
|
||
.tab-item.active {
|
||
color: #000000;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.tab-item.active::after {
|
||
content: "";
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 32rpx;
|
||
height: 6rpx;
|
||
background-color: #E8101E;
|
||
border-radius: 3rpx;
|
||
}
|
||
|
||
/* 服务列表样式 */
|
||
.service-list {
|
||
margin: 24rpx 24rpx 0;
|
||
.service-list-item {
|
||
margin-bottom: 20rpx;
|
||
}
|
||
}
|
||
|
||
.load-more {
|
||
text-align: center;
|
||
padding: 20rpx 0;
|
||
color: #999999;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.service-item {
|
||
cursor: pointer;
|
||
user-select: none;
|
||
-webkit-user-select: none;
|
||
}
|
||
|
||
.service-nothings {
|
||
display: flex;
|
||
flex-flow: row nowrap;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 280rpx 0 0;
|
||
}
|
||
|
||
.nothings-text {
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
color: #999999;
|
||
text-align: center;
|
||
font-style: italic;
|
||
}
|
||
|
||
.add-btn {
|
||
height: 140rpx;
|
||
}
|
||
|
||
/* 平台特定样式 */
|
||
/* #ifdef H5 */
|
||
.service-container {
|
||
padding-bottom: constant(safe-area-inset-bottom);
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
}
|
||
|
||
/* #endif */
|
||
|
||
/* #ifdef APP-PLUS */
|
||
.service-image {
|
||
border: 1rpx solid #eeeeee;
|
||
}
|
||
|
||
.flexed {
|
||
top: calc(var(--status-bar-height) + 88rpx);
|
||
}
|
||
|
||
/* #endif */
|
||
|
||
/* #ifdef MP-WEIXIN */
|
||
.search-box input {
|
||
/* 小程序搜索框样式调整 */
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.flexed {
|
||
top: calc(var(--status-bar-height) + 88rpx);
|
||
}
|
||
|
||
.service-item {
|
||
/* 小程序阴影效果 */
|
||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
/* #endif */
|
||
.headerBox {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 30rpx;
|
||
background-color: #fff;
|
||
padding: 24rpx 30rpx 0rpx 30rpx;
|
||
|
||
.search-box {
|
||
// flex: 1;
|
||
}
|
||
|
||
.addBox {
|
||
// width: 100rpx;
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4rpx;
|
||
align-items: center;
|
||
padding-right: 17rpx;
|
||
|
||
.addIcon {
|
||
width: 46rpx;
|
||
height: 41rpx;
|
||
}
|
||
|
||
.addText {
|
||
color: #666666;
|
||
font-size: 20rpx;
|
||
position: relative;
|
||
|
||
&::after {
|
||
content: "";
|
||
position: absolute;
|
||
background-image: url("/static/images/icons/triangle_down.png");
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
background-size: cover;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
right: -17rpx;
|
||
width: 12rpx;
|
||
height: 8rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|