settle_down_wx/pages/subPackages/activityPromulgate/list.vue

<template>
    <div class="activityPromulgate">
        <div class="activityTop">
          <div class="addRepair" @tap="newRelease(null)">新增活动 <van-icon name="add" style="margin-left: 8rpx"/></div>
          <div class="parkDynamicTab2">
            <div
                v-for="(item, index) in tabList"
                :key="index"
                class="tabItem"
                :class="selectTab === item.label ? 'selectTabItem' : ''"
                @click="clickTab(item)"
            >
              {{ item.label }}
            </div>
          </div>
        </div>
      <div class="activityListBody">
        <div class="listItem" v-for="item in activityList">
           <div class="listItemInfoBox">
             <div class="listItemInfoLeft">
               <span class="listTitle">{{item.activityName}}</span>
               <span class="listCon">发布时间:{{item.releaseTime}} </span>
               <span class="listCon">报名截止时间:{{item.registrationEndTime}}</span>
               <span class="listCon">活动开始时间:{{item.activityStartTime}}</span>
             </div>
             <div class="listItemInfoRight">
               <img :src="item.imgUrl" class="listImg">
               <div class="tags" :class="item.status==='2'?'bmzTag':item.status==='3'?'bmjsTag':item.status==='4'?'hdjsTag':'wksTag'">{{item.statusName}}</div>
             </div>
           </div>
           <div class="listItemInfoBox2">
             <div class="fbrBox">
               <van-icon name="contact" style="color:rgba(102, 102, 102, 1)"/>
               发布人：{{item.releaseUserName}}
             </div>
             <div class="fbrBox">
               {{item.registrationNumbers}}人报名    {{item.signInNumber}}人签到
             </div>
           </div>
          <div class="listItemInfoBox3">
            <div class="qrCodeBox" @tap="toQrCode(item)">
              <img src="https://www.idea-co-sf.com/gardenProduct/image/icon01.png" class="qrIcon">
              <span>活动签到码</span>
            </div>
            <div class="listBtnBox">
              <button class="rBtn editBtn" v-if="item.releaseStatus !== '1'" @tap="newRelease(item)">编辑</button>
              <button class="rBtn" :class="item.releaseStatus==='1'?'downBtn':'upBtn'" @tap="clickType(item)">{{item.releaseStatus==='1'?'下架':'上架'}}</button>
            </div>
          </div>
        </div>
        <van-dialog
            use-slot
            :show="show"
            show-cancel-button
            confirm-button-open-type="getUserInfo"
            @confirm="confirm"
            confirm-button-text="确定"
            cancel-button-text="取消"
            confirm-button-color="rgba(87, 107, 149, 1)"
            @close="show = false"
        >
          <div class="dialogInfo">
            <van-icon name="warning" style="color:#10aeff;font-size: 128rpx"/>
            <span style="margin-top: 16rpx" v-if="dialogType==='下架'">下架后小程序端将无法查看</span>
            <span style="margin-top: 8rpx" v-if="dialogType==='下架'">该活动信息，确认下架吗?</span>
            <span style="margin-top: 16rpx" v-if="dialogType==='上架'">上架后小程序端将显示该活动信息，</span>
            <span style="margin-top: 8rpx" v-if="dialogType==='上架'">确认上架吗?</span>
          </div>
        </van-dialog>
      </div>
    </div>
</template>

<script>
import { listHomeCommunityActivity, getUserLocalStorageInfo,editHomeCommunityActivity ,getByCodes} from "@/js_sdk/http";
export default {
    data() {
       return{
         dc_key:['activity_type'],
         show: false,
         selectTab:'全部',
         activityList:[
           // {name:'互联网私募如何入门？',typeName:'下架',status:'报名中'},
           // {name:'公募基金中的大数据挖掘？',typeName:'上架',status:'报名结束'},
           // {name:'年度小艾杯篮球赛开始啦？',typeName:'下架',status:'活动结束'},
           // {name:'互联网私募如何入门？？',typeName:'下架',status:'未开始'},
         ],
         tabList:[
           {label:'全部',value:''}
         ],
         dialogType:'',
         search: {
           createdBy: getUserLocalStorageInfo().userId,
           pageNum: 1,
           pageSize: 10
         },
         actType:{
           id:'',
           releaseStatus:''
         }
       }
    },
    onShow(){
      this.getByCodes()
    },
    onPullDownRefresh() {
      this.getList()
      setTimeout(function () {
        uni.stopPullDownRefresh();
      }, 1000);
    },
    mounted() {
    },
    methods: {
      async getByCodes() {
        this.tabList = [{label:'全部',value:''}]
        let data = await getByCodes(JSON.stringify(this.dc_key));
        this.dic_SelectList = this.$common.handleDicList(data);
        this.dic_SelectList.activity_type.forEach(item=>{
          this.tabList.push(item)
        })
        this.getList()
        // console.log('this.tabList',this.tabList)
      },
      clickTab(item) {
        this.selectTab = item.label;
        this.search.activityType = item.value
        this.getList()
      },
      getList(){
        this.activityList = []
        listHomeCommunityActivity(this.search).then(res=>{
          if (res.errno == 0){
            this.activityList = res.data.rows
            this.activityList.forEach(item=>{
              if (item.annex) {
                 item.imgUrl = JSON.parse(item.annex)[0].url
              }
            })
          }
        })
      },
      newRelease(e){
        // console.log(e)
        if (e){
          uni.navigateTo({
            url:'/pages/subPackages/activityPromulgate/add?item=' + JSON.stringify(e)
          })
        }else{
          uni.navigateTo({
            url:'/pages/subPackages/activityPromulgate/add'
          })
        }
      },
      onChange(){

      },
      clickType(item) {
        if (item.releaseStatus==='1'){
          this.dialogType = '下架'
          this.actType.releaseStatus = '2'
        }else{
          this.dialogType = '上架'
          this.actType.releaseStatus = '1'
        }
         this.actType.id = item.id
         this.show = true
      },

      confirm(e){
        editHomeCommunityActivity(this.actType).then(res=>{
            uni.showToast({
              title: res.errmsg,
              icon: 'none',
              mask: true,
              duration: 1000
            });
          this.getList()
        })
      },

      toQrCode(item) {
        uni.navigateTo({
          url:'/pages/subPackages/activityPromulgate/qrCode?item=' + JSON.stringify(item)
        })
      }
    }
}
</script>
<style lang="scss">
    .activityPromulgate{
      .activityTop{
        background: white;
        padding: 26rpx 32rpx;
        .addRepair{
          display: flex;
          justify-content: flex-end;
          align-items: center;
          color: rgba(3, 101, 249, 1);
        }
      }
      .activityListBody{
        padding: 32rpx;
        .listItem{
          width: 686rpx;
          height: 388rpx;
          padding: 24rpx 0;
          border-radius: 16rpx;
          background: white;
          box-sizing: border-box;
          margin-bottom: 24rpx;
          .listItemInfoBox{
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 24rpx;
            .listItemInfoLeft{
              display: flex;
              flex-direction: column;
              .listTitle{
                width: 375rpx;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                font-size: 32rpx;
                color: rgba(24, 23, 42, 1);
                font-weight: 600;
                margin-bottom: 10rpx;
              }
              .listCon{
                font-size: 26rpx;
                color: rgba(102, 102, 102, 1);
                line-height: 42rpx;
              }
            }
            .listItemInfoRight{
              position: relative;
              width: 220rpx;
              height: 180rpx;
              border-radius: 8rpx;
              overflow: hidden;
              .tags{
                width: 128rpx;
                height: 48rpx;
                position: absolute;
                top: 0;
                right: 0;
                border-radius: 0 8rpx 0 8rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 28rpx;
              }
              .bmzTag{
                background: rgba(198, 255, 224, 1);
                color: rgba(34, 181, 101, 1);
              }
              .bmjsTag{
                color: rgba(255, 107, 24, 1);
                background: rgba(255, 211, 186, 1);
              }
              .hdjsTag{
                color: rgba(141, 146, 155, 1);
                background: rgba(226, 232, 239, 1);
              }
              .wksTag{
                color: rgba(3, 101, 249, 1);
                background: rgba(197, 218, 250, 1);
              }
              .listImg{
                width: 100%;
                height: 100%;
              }
            }
          }
          .listItemInfoBox2{
            display: flex;
            justify-content: space-between;
            padding: 0 24rpx;
            margin-top: 12rpx;
            margin-bottom: 28rpx;
            .fbrBox{
              font-size: 26rpx;
              color: rgba(102, 102, 102, 1);
              line-height: 44rpx;
            }
          }
          .listItemInfoBox3{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 34rpx 32rpx 0 32rpx;
            border-top: 1px solid rgba(230, 230, 230, 1);
            .listBtnBox{
              display: flex;
              align-items: center;
              .rBtn{
                width: 160rpx;
                height: 60rpx;
                border-radius: 32rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 28rpx;
                &::after{
                  border-radius: 32rpx;
                  border: none;
                }
              }
              .editBtn{
                border: 1px solid rgba(3, 101, 249, 1);
                color: rgba(3, 101, 249, 1);
                margin-right: 24rpx;
              }
              .downBtn{
                background: linear-gradient( 316deg, #84AAFF 0%, #0365F9 100%);
                color: white;
              }
              .upBtn{
                background: linear-gradient( 316deg, #52E997 0%, #21A45C 100%);
                color: white;
              }
            }
            .qrCodeBox{
              display: flex;
              align-items: center;
              color: rgba(3, 101, 249, 1);
              font-size: 28rpx;
              .qrIcon{
                width: 32rpx;
                height: 32rpx;
                margin-right: 16rpx;
              }
            }

          }
        }
      }
      .dialogInfo{
        padding: 64rpx 32rpx;
        font-size: 34rpx;
        color:rgba(51, 51, 51, 1);
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .parkDynamicTab2 {
        display: flex;
        padding: 24rpx 0;
        margin-top: 24rpx;
        .tabItem {
          color: #666666;
          font-size: 28rpx;
          margin: 0 auto;
        }
        .selectTabItem {
          color: #18172a;
          border-bottom: 6rpx solid #034df7;
        }
      }
    }
</style>