YingXingAI/pages/my/wishlist/wishlist.vue

<template>
  <view class="body">
    <u-navbar :custom-back="router" title="心愿单"></u-navbar>
    <view class="userinfo">
      <view class="flex-col justify-center items-center ">
        <u-avatar :src="$u.http.config.imgUrl+vuex_user.head" size="172"></u-avatar>
        <view class="info">
          <text class="name">{{ vuex_user.userName }}{{ schoolInfo.startYear?' ('+schoolInfo.startYear+')':'' }}</text>
        </view>
        <view class="school-info">
          <text>{{ schoolInfo.college?schoolInfo.college +'-'+schoolInfo.major+' · '+schoolInfo.educationStr:schoolInfo.school }}</text>
        </view>
      </view>
    </view>
    <view class="list">
      <view class="title flex-row items-center">
        <img alt="" class="leftIcon" src="./leftIcon.png" srcset="">
        <text class="text">我的心愿</text>
      </view>
      <view class="list-box">
        <scroll-view :scroll-top="0" :scroll-with-animation="true" :style="{height:`calc(100vh - 3.29rem)`}" class="scroll-view"
                     scroll-y="true" @scrolltolower="scrolltolower">
          <view v-for="(item,index) in wishList" class="item" :key="index">
            <view class="top flex-col">
              <view class="flex-row items-center">
                <text class="title">{{item.wishTitle}}</text>
                <u-tag v-if="item.isNM" text="匿名"></u-tag>
              </view>
              <text class="time">{{item.createTime}}</text>
            </view>
            <view class="content">
              <text>
                <u-read-more :toggle="true" show-height="185">
                  <rich-text :nodes="item.wishContext"></rich-text>
                </u-read-more>
              </text>
            </view>
            <view class="bottom flex-row  justify-end">
              <!-- <text class="delete" @click="onDelWish(item,index)">删除</text> -->
              <image style="width: 40rpx;height: 40rpx;" src="/static/common/img/delete.svg" @click="onDelWish(item,index)"></image>
            </view>
          </view>
          <view v-if="!wishList.length" >
            <!-- <u-empty  text="暂无数据" mode="list"></u-empty> -->
             <no-data></no-data>
          </view>
          <u-divider v-if="isbottom&&wishList.length>3" style="padding: 10px 0;">到底了</u-divider>
        </scroll-view>
      </view>
      <view style="margin-top: .08rem;">
        <u-button type="primary" shape="circle"  @click="toAddWishlist">添加心愿</u-button>
      </view>
    </view>
    <u-toast ref="uToast" />
  </view>
</template>

<script>

import NoData from 'components/NoData.vue'
export default {
  components:{
    NoData
  },
  data() {
    return {
      wishList: [],
      totalCount: 0,
      PageIndex: 1,
      PageSize: 10,
      isbottom: false,
      schoolId:'',
      schoolInfo: {},
    };
  },
  onLoad() {
    this.getSchool();
  },
 async onShow() {

   await this.getSchool();
    this.PageIndex=1
    this.getList()
  },
  methods: {
        // 获取学校
    async getSchool() {
        const req = {
          userId: this.vuex_user.id,
        };
        const res = await this.$u.apiList.MyEducations(req);
        console.log(res,'res---');
        const findRow = res.find(x=>x.isSelected === true)
        this.schoolInfo = findRow || {};
        if(findRow){
          this.schoolId = findRow.schoolId
        }
        console.log(this.schoolId, 'this.schoolId--')
        // this.schoolId = res.filter(function (x) {
        //   return x.isSelected === true
        // })[0]?.schoolId
    },
    router() {
      uni.navigateBack({
        delta: 1
      });
    },
    // 获取心愿单列表
    getList() {
      if(this.PageIndex==1){
        this.wishList=[]
      }
      this.$u.api.GetWishListAsync_mobile({
        PageIndex: this.PageIndex,
        PageSize: this.PageSize,
        UserId: this.vuex_user.id,
        schoolId: this.schoolId
      }).then(res => {
        this.wishList = this.wishList.concat(res.wishList)
        this.totalCount = res.totalCount
        if (this.totalCount <= this.wishList.length) {
          this.isbottom = true
        }
      })
    },
    // 滚动触底
    scrolltolower() {
      if (this.totalCount > 0 && this.totalCount > this.wishList.length) {
        this.PageIndex++;
        this.getList()
      }
    },
    // 删除心愿单
    onDelWish(item, index) {
      uni.showModal({
        // title: '提示',
        content: '确定删除该心愿吗？',
        success: (res) => {

          if (res.confirm) {
            this.$u.api.DeleteWish({
              id: item.id
            }).then(() => {
              this.wishList.splice(index, 1)
              /* uni.showToast({
                title: '删除成功',
                icon: 'none'
              }) */
              this.$refs.uToast.show({
                title: '删除成功',
                type: 'success'
              });
            })
          }
        }
      })
    },
    toAddWishlist() {
      uni.navigateTo({
        url: '/pages/my/wishlist/addwishlist'
      });
    }
  }
}
</script>

<style lang="scss">
.body {
  background-image: url("/static/common/img/wishlistBackImg.png");
  background-size: 100% 3rem;
  background-repeat: no-repeat;
  height: 100vh;
}

.userinfo {
  padding-top: .2rem;
  padding-bottom: .3rem;

  .name {
    font-size: 0.16rem;
    color: rgba(0, 0, 0, 0.9);
    line-height: 0.28rem;
    font-weight: bold;
    padding: .05rem 0;
    letter-spacing: 0.01rem;
    display: block;
  }
}

.list {
  background: #FFFFFF;
  box-shadow: 0rem -0.06rem 0.15rem 0rem rgba(0, 0, 0, 0.1);
  border-radius: 0.16rem 0.16rem 0 0;
  padding: .24rem .16rem 0.26rem .16rem;

  > .title {
    .leftIcon {
      width: 0.31rem;
      height: 0.24rem;
    }

    .text {
      font-weight: 500;
      font-size: 40rpx;
      color: #000000;
      line-height: 0.24rem;
      margin-left: 0.05rem;
    }
  }

  .list-box {
    height: calc(100vh - 3.59rem);
    overflow-y: scroll;
    margin-top: .16rem;

    .item {
      margin-top: .16rem;
      background: #F7F6F9;
      border-radius: 0.08rem 0.08rem 0.08rem 0.08rem;
      padding: .13rem;

      &:first-child {
        margin-top: 0;
      }

      &:last-child {
        margin-bottom: .16rem;
      }

      .top {
        border-bottom: 0.01rem solid #DBD8E1;

        .title {
          font-weight: 400;
          font-size: 0.16rem;
          color: #000000;
          line-height: 0.24rem;
          margin-right: 5px;
          width: fit-content;
          max-width: 80%;
        }

        .time {
          font-size: 0.12rem;
          color: rgba(0, 0, 0, 0.4);
          line-height: 0.24rem;
        }
      }

      .content {
        margin-top: 0.05rem;

        text {
          font-size: 0.14rem;
          color: rgba(0, 0, 0, 0.6);
          line-height: 0.2rem;
        }
      }

      .bottom {
        margin-top: .08rem;

        .delete {
          font-size: 0.14rem;
          color: #0A84FF;
          line-height: 0.22rem;
        }
      }
    }
  }
}
.school-info{
  font-weight: 400;
font-size: 24rpx;
color: rgba(0,0,0,0.6);
}

::v-deep .u-navbar {
  background-color: transparent !important;
}
::v-deep .u-border-bottom:after {
  display: none;
}
::v-deep .u-content__showmore-wrap {
  background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #F7F6F9 60%) !important;
  padding-top: 90rpx !important;
  margin-top: -90rpx !important;
}
::v-deep .u-content__show-more {
  background-image: none !important;
}
::v-deep .u-content {
  text-indent: 0em !important;
  font-size: 28rpx !important;
}
</style>