dyqc_hdapp/pages/index/index.vue

<template>
  <view
    class="recharge flex align-items justify-start flex-column"
    :style="{
      zIndex: '-1',
      backgroundPosition: 'top',
      backgroundRepeat: 'no-repeat',
    }"
  >


    <view class="box">
      
      
        <!-- logo -->
      <view>
        <image
          src="/static/index/logo1.png"
          mode=""
          style="width: 430rpx; height: 80rpx;margin-top: 65rpx;"
        ></image>
      </view>
      <!-- 搜索 -->
      <view class="serch_top">
        <u-search
          class="u-search"
          v-model="keywords"
          placeholder="搜索您要找的内容"
          :showAction="false"
          search-icon="/static/index/search.png"
          @change="search()"
        >
        </u-search>
        <span class="searchBtn" @click.stop="search()">搜索</span>
      </view>
      

      <view class="swiper-box">
        <MySwiper :list="swiperList"></MySwiper>
      </view>

      <!-- 标签 -->
      <view class="tab_all">
        <view class="tabs">
          <view
            v-for="(tab, index) in list"
            :key="index"
            :class="['tab-item', { active: current === index }]"
            @click="handleClick(index,tab.id)"
          >
            <image
              v-if="index != 0 && tab.image"
              :src="tab.image"
              mode=""
              class="imgs_bq"
            ></image>
            <span>{{ tab.name }}</span>
          </view>
        </view>
        <view class="allbq" @click="openBq">
          <image src="/static/index/qbbq.png" mode="" class="imgs_all"></image>
        </view>
      </view>
      <!-- 热门活动 -->
      <view class="hot flex flex-column">
        <view class="content flex align-items flex-column">
          <view
            class="flex flex-column w-100 bbb"
            v-for="(item, index) in hotList"
            :key="index"
            @click="detail(item.id)"
			>
           

              <view
              class="flex"
              style="margin-top: 30rpx"
            >
              <view
                class="right flex flex-column"
                style="align-items: self-start"
              >
                <span class="title white-space">{{ item.title }}</span>
                <view class="first-image flex align-items" style="margin-top: 20rpx;width: 100%;">
                  <image :src="item.user.avatar" style="width: 36rpx;height: 36rpx;"></image>
                  <span style="color: #9C9C9C;margin-left: 10rpx;">{{ item.user.nickname }}</span>
                  <view class="white-space" style="width: 60%;">
                    <span style="color:#0CA013;margin-left: 20rpx;" v-for="items_t in item.classes_cate">#{{ items_t }}</span>
                  </view>
                </view>

                <view class="flex flex-column"  style="margin-top: 20rpx;">
                  <view class="time flex align-items white-space">
                    <span class="time_tex" v-if="item.status == 2">{{ '报名中' }}</span>
                    <!-- <span class="time_tex time_texs" v-if="item.status == 4">{{ '进行中' }}</span> -->
                    <span style="margin:0 20rpx;">{{ dateWeeks(item.start_time) }}</span>|
                    <span class="white-space" style="margin-left: 20rpx;width: 260rpx;">{{ item.address_detail }}</span>
                  </view>

                </view>

                <view class="flex align-items justify-center" style="margin-top: 20rpx;" >
                  <image class="imgs_con" v-for="(items_img,index) in item.images.slice(0,3)" :key="index" :src="items_img"></image>
                </view>
              </view>
            </view>

            <view class="bottom flex align-items">
              <view class="flex align-items toptext">
                <span class="flex align-items">
                  <u-avatar-group
                    :urls="item.join_info.users"
                    keyName="avatar"
                    size="30"
					          maxCount="5"
                    gap="0.4"
                  ></u-avatar-group>
                  <image
                    src="/static/index/dian.png"
                    :class="item.join_info.users.length > 0 ? '' :'smalld'"
                    style="width: 60rpx;height: 60rpx;margin-left:-20rpx;z-index: 1;"
                  ></image>
                </span>
                <view class="number flex align-items" >
                  {{  Number(item.join_info.people_number)+"人已上车" }}
                </view>
              </view>
              <span v-if="item.status == 5" class="part1 flex justify-center align-items">
                已结束
              </span>
              <span v-if="item.status == 2" class="part flex justify-center align-items">
                上车
              </span>
              
            </view>

            
          </view>
        </view>
      </view>

      <!-- 全部标签 -->
			<u-popup :show="showPopbq" mode="bottom" round="20" :customStyle="{'width':'750rpx','height':'1040rpx'}" :closeable="true"
				@close="closebq">
				<view class="popup_bq">
					<img src="https://naweigetetest2.hschool.com.cn/dyqc/biaoqian.png" alt="" />
          <view class="flex flex-column w-100 bqlist">
            
              <span>我的标签</span>
              <view class="flex align-items allmybqs">
                <view class="flex align-items bqpiece" v-for="(item_bq,index) in list" :key="index">
                  <span>
                    <image
                      v-if="item_bq.name != '全部'"
                      :src="item_bq.image"
                      style="width: 48rpx;height: 48rpx;margin-right:10rpx;"
                    ></image>
                    {{ item_bq.name }}
                  </span>
                  <u-icon v-if="index != 0" name="close" color="#babdc7" @click="removebq(index)"></u-icon>
                </view>
              </view>

              <span style="margin-top: 30rpx;">全部标签</span>

              <scroll-view scroll-y="true" class="flex align-items allbqs">
                  <view  style="display: flex; flex-wrap: wrap;">
                    <view class="flex align-items bqpiece" v-for="(item,index) in bqList" :key="index">
                      <span>
                        <image
                        :src="item.image"
                        style="width: 48rpx;height: 48rpx;margin-right:10rpx;"
                      ></image>
                        {{ item.name }}
                      </span>
                      <u-icon name="plus" color="#babdc7" @click="addbq(item)"></u-icon>
                    </view>
                  </view>
              </scroll-view>

              </view>
          </view>   

				
			</u-popup>


      <view class="bottom_box flex justify-center align-items" style="height: 560rpx;" v-if="hotList.length == 0">
        暂无数据
      </view>
      <u-loadmore v-else style="margin-bottom: 60rpx;" :status="loadStatus" />
    </view>
    <tab-bar :tabBarShow="0"></tab-bar>
  </view>
</template>

<script>
import MySwiper from "@/components/fuyu-MixSwiper/fuyu-MixSwiper.vue";
import {
		dateWeek
	} from '../../utils/dateFormat'
export default {
  components: {
    MySwiper,
  },
  data() {
    return {
      showPopbq:false,//标签弹窗
      bqList:[],//标签列表
      cate_ids:'',//标签id
      loadStatus:'nomore',
      swiperList: [],
      teacherList: [],
      wqList: [],
      hotList: [],
      unread_number: "",
      keywords: "",
      count: 1,
      current: 0,
      autoplay: true,
      scrollTop: 0,
      dotsShow: true,
      videoList: [],
      currentItemType: "",
      tjShow: true,
      videoAutoplay: false,
      list: [
        {
          name: "全部",
          id: 0
        }
      ],
      show: false
    };
  },
  onLoad() {
    uni.hideTabBar();
  },
  mounted() {
    this.videoContext = uni.createVideoContext("myVideo"); //创建视频实例指向video
  },
  onShow() {
    this.getinit();
    this.resetLists();
    this.getHotList();
    this.getBqList();
    this.getitembq();
  },
  beforeDestroy() {
    this.autoplay = false;
  },
  computed: {
    // limitedList() {
    //   return this.items.slice(0, 3);
    // }
  },
  methods: {
    // 获取本地标签列表
    getitembq(){
      if (uni.getStorageSync("bqlist") != "") {
        this.list = JSON.parse(uni.getStorageSync("bqlist"));
      }else{
        uni.setStorageSync('bqlist',JSON.stringify(this.list))
      }
    },
    dateWeeks(e){
      return dateWeek(e);
    }, 
    closebq() {
      this.showPopbq = false
    },
    openBq() {
      this.showPopbq = true
    },
    // 获取胶囊高度
    // capsuleHeight() {
    //   if (uni?.getMenuButtonBoundingClientRect()) {
    //     return `${
    //       uni.getMenuButtonBoundingClientRect().height * 2 +
    //       uni.getMenuButtonBoundingClientRect().top * 2 +
    //       26
    //     }rpx`;
    //   } else {
    //     return `180rpx`; 
    //   }
    // },
    //底部翻页
    // onReachBottom() {
    //   if (this.hotList.length < this.count) {
		// 		this.page++;
		// 		this.getHotList();
		// 	}
		// },
    // 重置列表
    resetLists() {
      this.page = 1;
      this.hotList = [];
      this.loadStatus = "loading";
    },
    // 标签点击
    handleClick(index,val) {
      this.current = index;
      this.cate_ids = val;
      this.hotList = [];
      this.getHotList();
    },
    // 搜索
    search() {
      if (this.keywords == "") {
        this.tjShow = true;
      } else {
        this.tjShow = false;
      }
      this.resetLists();
      this.getHotList();
    },

    //轮播图跳转
    click(e) {
      uni.navigateTo({
        url: e,
      });
    },

    // 获取首页信息
    getinit() {
      uni.$u.http
        .get("/api/index/init", {})
        .then((res) => {
          if (res.code == 1) {
            this.swiperList = res.data.home_data.top_images.list;
          } else {
            uni.showToast({
              title: res.msg,
              icon: "none",
              duration: 2000,
            });
          }
        })
        .catch((error) => {
          uni.showToast({
            title: "请求失败，请稍后再试",
            icon: "none",
            duration: 2000,
          });
        });
    },
 
    // 获取标签
    getBqList() {
      uni.$u.http
          .get("/api/school.new_activity/cate_list", {
          params: {
            page: 1,
            limit: 100
          },
        })
        .then((res) => {
          if (res.code == 1) {
						this.bqList = res.data.list;
          } else {
            uni.showToast({
              title: res.msg,
              icon: "none",
              duration: 2000,
            });
          }
        })
        .catch((error) => {
          uni.showToast({
            title: "请求失败，请稍后再试",
            icon: "none",
            duration: 2000,
          });
        });
    },
    //添加标签（本地）
    addbq(val){
      let arrbql = uni.getStorageSync("bqlist");
      let arrbq = JSON.parse(arrbql);
      let isbq = true;
      for (let i = 0; i < arrbq.length; i++) {
        if (arrbq[i].id == val.id) {
            uni.showToast({
              title: "已添加该标签",
              icon: "none",
              duration: 2000,
            });
            return isbq = false;
        }
      }
      if (this.list.length < 9) {
        if (isbq) {
          this.list.push(val);
          uni.setStorageSync('bqlist',JSON.stringify(this.list))
        }
      }else{
        uni.showToast({
          title: "最多添加9个标签",
          icon: "none",
          duration: 2000,
        });
      }
    },
    //删除标签（本地）
    removebq(i){
      this.list.splice(i,1);
      uni.setStorageSync('bqlist',JSON.stringify(this.list))
    },
    // 获取热门活动
    getHotList() {
      let words = this.keywords
      let cate_ids = this.cate_ids
      uni.$u.http
          .get("/api/school.new_activity/activity_list", {
          params: {
            keywords:words,
            cate_ids:cate_ids,
            page: 1,
            limit: 6,
            order: "normal",
            status: "2",//5 已结束
            auth_status: 1 //审核通过的
          },
        })
        .then((res) => {
          if (res.code == 1) {
            // this.count = res.data.list.data.length
            // if(this.count){
            //   this.loadStatus = 'nomore';
            //   this.page++;
            // } else {
            //   this.loadStatus = 'loading';
            // }
            // this.hotList = [...this.hotList, ...res.data.list.data];
						this.hotList = res.data.list.data;
          } else {
            uni.showToast({
              title: res.msg,
              icon: "none",
              duration: 2000,
            });
          }
        })
        .catch((error) => {
          uni.showToast({
            title: "请求失败，请稍后再试",
            icon: "none",
            duration: 2000,
          });
        });
    },
    // 跳转详情
    detail(id) {
      uni.navigateTo({
        url: "/pages/center/detail?id=" + id,
      });
    },
    // 跳转往期详情
    Wqdetail(id) {
      uni.navigateTo({
        url: "/packageA/index/previousDetail?id=" + id,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.w-100 {
  width: 100%;
}

.flex {
  display: flex;
}

.justify-center {
  justify-content: center;
}

.space-between {
  justify-content: space-between;
}

.align-items {
  align-items: center;
}

.flex-column {
  flex-flow: column;
}

.justify-start {
  justify-content: start;
}

.mar-top-30 {
  margin-top: 30rpx;
}

.tab_all {
  margin-top: 30rpx;
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;

  .allbq {
    width: 88rpx;
    height: 70rpx;
    background: #f7f7f7;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    right: 0;

    .imgs_all {
      width: 44rpx;
      height: 44rpx;
    }
  }

  .tabs {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-right: 60rpx;

    /* 优化滚动效果 */
    .tab-item {
      display: flex;
      justify-content: center;
      align-items: center;
      flex: 0 0 auto;
      text-align: center;
      margin-right: 20rpx;
      position: relative;
      font-family: "YouSheBiaoTiHei";
      font-weight: 400;
      font-size: 34rpx;
      color: #9c9c9c;
      width: 180rpx;
      height: 70rpx;
      line-height: 70rpx;
      background: linear-gradient(180deg, #ffffff 44%, #f7f7f7 100%);
      border-radius: 48rpx 48rpx 48rpx 48rpx;

      .imgs_bq {
        width: 32rpx;
        height: 32rpx;
        margin-right: 10rpx;
      }
    }

    .tab-item.active {
      background: linear-gradient(
        360deg,
        rgba(196, 249, 119, 0) 0%,
        #bbfc5b 100%
      );
      font-size: 34rpx;
      color: #323232;
    }
  }
}

.recharge {
  width: 750rpx;
  background-color: #f7f7f7;
  background-image: url("https://naweigetetest2.hschool.com.cn/dyqc/bgx2.png");
  background-size: 750rpx 797rpx;

  .group {
    width: 690rpx;
    height: 152rpx;
    position: relative;

    .g-left {
      margin-left: 176rpx;

      span {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-size: 36rpx;
        color: #242623;
      }
    }

    .g-center {
      width: 176rpx;
      height: 64rpx;
      margin-left: 56rpx;
      background: #ffffff;
      border-radius: 40rpx 40rpx 40rpx 40rpx;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: bold;
      font-size: 28rpx;
      color: #222222;
    }

    .g-right {
      position: absolute;
      width: 50rpx;
      height: 50rpx;
      top: 0;
      right: 0;
    }
  }

  .box {
    width: 690rpx;
    margin-top: 30rpx;

    .serch_top {
      margin-top: 10rpx;
      margin-bottom: 30rpx;
      position: relative;
       .u-search{
        background: rgba($color: #FFFFFF, $alpha: 0.6);
        ::v-deep .u-search__content{
          background: rgba($color: #FFFFFF, $alpha: 0.6);
        }
        ::v-deep .u-search__content__input{
          background: rgba($color: #FFFFFF, $alpha: 0.6);
        }
      }
      .searchBtn{
        position:absolute;
        width: 133rpx;
        height: 100%;
        background: #323232 ;
        border-radius: 40rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 26rpx;
        color: #FFFFFF;
        display: flex;
        justify-content: center;
        align-items: center;
        top: 0;
        right: 0;
		  }
    }

    .hot {
      //   margin-top: 30rpx;
      margin-bottom: 100rpx;

    }
  }

  .content {
    // height: 462rpx;
    // overflow-x: auto;
    /* 允许横向滚动 */
    // white-space: nowrap;

    width: 690rpx;

    .bbb {
      background: #ffffff;
      margin-top: 24rpx;
      border-radius: 36rpx;
    }

    .right {
      margin-left: 30rpx;
      width: 100%;

      .title {
        width: 95%;
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 30rpx;
        color: #323232;
      }
      .first-image {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #9C9C9C ;

        span {
          font-family: Source Han Sans CN, Source Han Sans CN;
          font-weight: 400;
          font-size: 26rpx;
          color: #222222;
        }
      }
      .row {
        margin: 10rpx 0 26rpx 0;

        .remen {
          // width: 136rpx;
          height: 40rpx;
          background: #ebfaf5;
          border-radius: 4rpx 4rpx 4rpx 4rpx;

          font-family: Source Han Sans CN, Source Han Sans CN;
          font-weight: 400;
          font-size: 24rpx;
          color: #14bc84;
          line-height: 28rpx;
          padding: 2rpx 8rpx;
        }

        .line-colum {
          width: 1rpx;
          height: 32rpx;
          background: #7a7a7a;
          margin: 0 13rpx;
        }

        .name {
          width: 110rpx;
          height: 32rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 26rpx;
          color: #7a7a7a;
          line-height: 32rpx;
          margin-left: 12rpx;
        }
      }


      .jigou {
        width: 312rpx;
        // height: 32rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 26rpx;
        color: #7a7a7a;
        margin: 4rpx 0 14rpx 0;
      }

      .time {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 26rpx;
        color: #323232 ;
        line-height: 30rpx;
        
          .time_tex{
            width: 116rpx;
            height: 42rpx;
            background: #BBFC5B;
            border-radius: 159rpx;
            font-weight: 400;
            font-size: 24rpx;
            color: #323232;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          .time_texs{
            background: #FF4810;
            color: #ffffff;
          }
        
      }
      .imgs_con{
          width: 202rpx;
          height: 202rpx;
          margin-right: 12rpx;
          &:first-child{
            border-radius: 18rpx 0 0 18rpx;
         }
         &:nth-child(3){
          border-radius: 0 18rpx 18rpx 0;
         }
      }

    }

    .bottom {
      margin: 32rpx 0 32rpx 24rpx;
      width: 655rpx;
      .toptext{
        width: 480rpx;
        .smalld{
          margin-left: 0 !important;
        }
      }
      .number {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 26rpx;
        color: #3D3D3D;
        line-height: 30rpx;
        width: 242rpx;
        margin-left: 20rpx;
      }

      .text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 800;
        font-size: 26rpx;
        color: #7a7a7a;
      }

      .money {
        width: 150rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 800;
        font-size: 36rpx;
        color: #ff2323;
        justify-content: flex-end;
      }
    }

    .ovr {
      width: 312rpx;
      background: #ffffff;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      margin-top: 18rpx;
      margin-right: 24rpx;
    }
  }

  .content-footer {
    width: 690rpx;
    justify-content: space-between;
    margin-top: 42rpx;

    .line-left,
    .line-right {
      width: 221rpx;
      height: 1rpx;
      background: #7a7a7a;
    }

    .line-text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 800;
      font-size: 32rpx;
      color: #ff4023;
      margin-right: 8rpx;
    }
  }

  .con-center {
    width: 690rpx;
    height: 260rpx;
    background: #ffffff;
    border-radius: 16rpx;
    margin-top: 30rpx;

    .mask {
      margin: 32rpx;
    }

   
  }
}

.white-space {
  overflow: hidden;
  /* 确保超出容器的文本被隐藏 */
  white-space: nowrap;
  /* 确保文本在一行内显示 */
  text-overflow: ellipsis;
  /* 使用省略号表示被截断的文本 */
  width: 100%;
}










.pos {
  position: relative;

  .ab {
    position: absolute;
    right: 0%;
    bottom: 0%;
  }

  .m {
    width: 28rpx;
    height: 42rpx;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: bold;
    font-size: 28rpx;
    color: #ff4810;
  }

  .money {
    width: 68rpx;
    font-family: D-DIN-PRO, D-DIN-PRO;
    font-weight: bold;
    font-size: 36rpx;
    color: #ff4810;
  }

  .no {
    width: 64rpx;
    height: 48rpx;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: bold;
    font-size: 32rpx;
    color: #ff4810;
    line-height: 38rpx;
  }
}

.part {
  width: 162rpx;
  height: 70rpx;
  background: url(@/static/index/shangche.png);
  background-size: 162rpx 70rpx;
  background-repeat: no-repeat;
  font-family: 'YouSheBiaoTiHei';
  font-weight: 400;
  font-size: 42rpx;
  color: #BBFC5B;
}
.part1{
  width: 162rpx;
  height: 70rpx;
  background: url(@/static/index/shangchew.png);
  background-size: 162rpx 70rpx;
  background-repeat: no-repeat;
  font-family: 'YouSheBiaoTiHei';
  font-weight: 400;
  font-size: 42rpx;
  color: #9C9C9C;
}

.swiper-box {
  height: 580rpx;
  position: relative;
}
.popup_bq {
		display: flex;
		flex-direction: column;
		align-items: center;
    height: 1040rpx;
    position: relative;
		img {
      position: absolute;
			width: 750rpx;
			height: 1040rpx;
      top: -164rpx;
      z-index: 0;
		}
    .bqlist{
      margin-top: 130rpx;
      z-index: 1;
      margin-left: 80rpx;
      .allmybqs{
          flex-wrap: wrap;
          width: 720rpx;
          margin-top:20rpx ;
      }
      .allbqs{
          display: flex;
          overflow-y: scroll;
          flex-wrap: wrap;
          height: 620rpx;
          width: 692rpx;
          margin-top:20rpx ;
      }
      .bqpiece{
          width: 210rpx;
          height: 70rpx;
          background: #F7F7F7;
          border-radius: 12rpx 12rpx 12rpx 12rpx;
          display: flex;
          justify-content: space-around;
          align-items: center;
          margin: 20rpx 20rpx 20rpx 0;
          span{
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 26rpx;
            color: #323232;
            display: flex;
            align-items: center;
          }
        }
    }
   

	}
</style>