yitisheng-mini-app/pages/zyb/fillVolunteer/my.vue

<!--我的志愿列表-->
<script>
import ApiConstant from "@/common/ApiConstant";
import Request from '@/common/request'
import {formatTime} from "@/common/util";
import ImagesConstant from "@/common/ImagesConstant";
import View from "../../component/view/view.vue";

let request = new Request()
export default {
  name: "fillVolunteer-list",
  components: {View},
  computed: {
    ImagesConstant() {
      return ImagesConstant
    }
  },
  data() {
    return {
      volunteerList: [],//志愿单列表
    }
  },
  onShow() {
    this.getVolunteerList()
  },
  methods: {
    formatTime,
    /*获取志愿单列表*/
    getVolunteerList() {
      request.get(ApiConstant.Volunteer.volunteerPage, {}).then(r => {
        console.log(r)
        if (r.success) {
          this.volunteerList = r.result
        }
      }).catch(err => {
      }).finally(() => {
      });
    },
    /*点击新增志愿*/
    clickAdd() {
      let that = this
      uni.showLoading({
        title: '创建志愿表'
      });
      request.post(ApiConstant.Volunteer.addNew, {}).then(res => {
        if (res.success) {
          setTimeout(function () {
            uni.hideLoading();
          }, 800)
          setTimeout(function () {
            that.getVolunteerList();
          }, 1000)

        } else {
          setTimeout(function () {
            uni.showToast({title: res.message, icon: "none"});
          }, 500)
        }
      }).catch(err => {
      }).finally(() => {
      });
    },
    clickEdit(e) {
      let scoreInfo = uni.getStorageSync('scoreInfo')
      let that = this
      console.log(scoreInfo)
      uni.navigateTo({
        url: '/pages/zyb/fillVolunteer/my-detail?volunteerId=' + e
      })
    },
    clickDelete(e) {
      let that = this
      console.log('删除')
      console.log(e)
      uni.showModal({
        title: '提示',
        content: '确认要删除当前志愿表吗?',
        confirmText: '确定',
        cancelText: '取消',
        success: function (res) {
          if (res.confirm) {
            that.deleteVolunteer(e)
          }
        }
      });
    },
    /*确认删除志愿表*/
    deleteVolunteer(e) {
      let that = this
      request.delete(ApiConstant.Volunteer.volunteerDelete, {id: e}).then(res => {
        if (res.success) {
          setTimeout(function () {
            uni.showToast({title: '删除成功', icon: "none"});
            that.getVolunteerList()
          }, 1000)
          setTimeout(function () {
            that.getVolunteerList()
          }, 1500)
        } else {
          setTimeout(function () {
            uni.showToast({title: res.message, icon: "none"});
          }, 500)
        }
      }).catch(err => {
      }).finally(() => {
      });
    },
    clickDownload(e) {
      //下载
      uni.showToast({title: '目前仅支持PC端下载', icon: "none"});
    },
    formatDate(dateString) {
      // 将日期字符串转换为Date对象
      var date = new Date(dateString.replace(/-/g,'/'));
      // 格式化为 "yyyy/MM/dd HH:mm:ss" 格式
      return date.getFullYear() + "/" +
          ("0" + (date.getMonth() + 1)).slice(-2) + "/" +
          ("0" + date.getDate()).slice(-2) + " " +
          ("0" + date.getHours()).slice(-2) + ":" +
          ("0" + date.getMinutes()).slice(-2) + ":" +
          ("0" + date.getSeconds()).slice(-2);
    }
  },
}
</script>

<template>
  <!--志愿信息列表-->
  <view class="container" style="background-color: #ffffcb">
    <text class="uni-h6">系统仅保留前5条志愿表</text>
  </view>
  <view style="border-top: 1px solid #f5f6f8">
    <view class="volunteerDiv" v-if="volunteerList.length>0" v-for="(item,index) in volunteerList" :key="item.id">
      <view class="uni-flex flex" style="padding: 15rpx;">
        <view class="flex-item-7 t_item" @click="clickEdit(item.id)">
          <text style="font-size: 30rpx;font-weight: 600">{{ item.volunteerName }}</text>
        </view>
        <view class="flex-item-2 t_item" @click="clickEdit(item.id)">
          <view class="tag-view" v-if="item.state==='1'">
            <uni-tag text="使用中" type="primary"/>
          </view>
        </view>
      </view>
      <view class="uni-flex flex" style="padding: 15rpx;">
        <view class="flex-item-6" @click="clickEdit(item.id)">
          <view class="uni-flex uni-row">
            <view class="flex-item t_item" style="color:#c1c4cc">
              <text>更新：</text>
              <text v-if="item.updateTime">{{ formatDate(item.updateTime) }}</text>
              <text v-else>{{ formatDate(item.createTime) }}</text>
            </view>
          </view>
          <view class="uni-flex uni-row">
            <view class="flex-item-8 t_item">
              <text>{{
                  item.userScoreInfo.cognitioPolyclinic
                }}&nbsp;&nbsp;|&nbsp;&nbsp;{{ item.userScoreInfo.professionalCategory }}
              </text>
            </view>
          </view>
        </view>
        <view class="flex-item-4">
          <view class="options">
            <view class="uni-flex flex">
              <view class="flex-item-5">
                <div class="img">
                  <!--style="border-right: 1px solid #c5c5c5;"-->
                  <image @click="clickEdit(item.id)" :src="ImagesConstant.cuti.edit"
                         style="width: 50rpx;height: 50rpx"/>
                </div>
              </view>
              <view class="flex-item-5">
                <div class="img">
                  <image @click="clickDelete(item.id)" :src="ImagesConstant.cuti.delete"
                         style="width: 50rpx;height: 50rpx"/>
                </div>
              </view>
              <!--              <view class="flex-item-33">
                              <div class="img">
                                <image @click="clickDownload(item.id)" src="/static/icons/cuti/file-download.png" style="width: 50rpx;height: 50rpx"/>
                              </div>
                            </view>-->
            </view>
          </view>
        </view>

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

<style scoped lang="scss">
.container {
  line-height: 80rpx;
  padding: 0 30rpx;
  font-weight: 550;
}

.volunteerDiv {
  background-color: white;
  margin-bottom: 30rpx;
  padding: 20rpx;
}

.t_item {
  margin-bottom: 15rpx;
}

.options {
  margin: 45rpx auto 50rpx 0;
}

.img {
  height: 40rpx;
  padding: 0 40rpx;
}

.img image {
  //margin: -8rpx 40rpx 0rpx 0rpx;
}

.addBtn {
  width: 100rpx;
  height: 100rpx;
  background-color: #4975fd;
  border-radius: 50%;
  position: absolute;
  bottom: 100rpx;
  right: 30rpx;
  display: flex;
  justify-content: center; /* 居中显示 */
  align-items: center; /* 居中显示 */
  .addBtn-text {
    /*position: relative;
    top: 13rpx;
    left: 18rpx;*/
    color: white;
    /*line-height: 1rpx;
    letter-spacing: 8rpx;*/
    font-size: 20rpx;
  }
}

</style>