mrr.sj.front/pages/shop/groupBuying/list.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: #FF4767">结束拼团活动</text
        >，根据平台规则，此操作需提交平台审核（审核通过后方可生效），请问您是否确认发起该申请？</text
      >
      <text v-else
        >您当前操作为<text style="color: #FF4767">结束拼团活动</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: #FF4767;
  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>