product_wx/pages/subPackages/resourceReservation_manage/components/appointmentHistory.vue

<template>
    <div class="historyListBody">
        <div class="historyItem" v-for="item in historyList">
            <div class="tags">{{item.resourceTypeStr}}</div>
            <div class="historyItemTitle">{{item.subject}}</div>
            <div class="historyItemInfo">使用日期：{{item.useTime}}</div>
            <div class="historyItemInfo">资源名称：{{item.resourceName}}</div>
            <div class="historyItemInfo">位置：{{item.position}}</div>
            <div class="historyItemInfo">预约时间：{{item.appointTime}}</div>
            <div class="historyItemBottom">
              <span class="typeInfo" :class="item.stateStr==='已通过'?'tgType':item.stateStr==='已取消'?'qxType':''">{{item.stateStr}}</span>
              <button @tap="toAdd(item)" class="btn" :class="item.stateStr==='暂存'?'zcBtn':''" v-if="item.stateStr !=='已取消'">{{item.stateStr==='暂存'?'编辑':'取消'}}</button>
            </div>
            <div v-if="item.stateStr==='已取消'" class="historyItemInfo">{{item.cancelReason}}</div>
        </div>
      <van-dialog
          use-slot
          title="取消预约"
          :show="show"
          show-cancel-button
          confirm-button-open-type="getUserInfo"
          @confirm="confirm"
          @cancel="show=false"
      >
        <div class="dialogBox">
          <van-field
              :value="content"
              autosize
              type="textarea"
              placeholder="请输入取消原因"
              class="myField2"
              maxlength="800"
              show-word-limit
              @change="changeMsg"
          />
        </div>
      </van-dialog>
    </div>
</template>

<script>
import {getByCodes, getMeetingAppointListApp, getUserLocalStorageInfo, cancelAppoint} from "@/js_sdk/http";

export default {
  name: "appointmentHistory",
  data(){
    return{
      content:'',
      show:false,
      getUserLocalStorageInfo: getUserLocalStorageInfo(),
      historyList:[
        {stateStr:'审核中'},
        {stateStr:'已通过'},
        {stateStr:'已取消'},
        {stateStr:'暂存'},
      ],
      id: ''
    }
  },
  created() {
    this.getList()
  },
  onShow() {
    this.getList()
  },
  onLoad(options) {
    this.getList()
  },
  methods:{
    changeMsg(e){
      this.content = e.detail
    },
    getList() {
      const _this = this
      _this.historyList = []
      const data = {
        pageNum : 1,
        pageSize : 100,
        createdId : getUserLocalStorageInfo().userId,
        states: '1,5,6,7'
      }
      getMeetingAppointListApp(data).then(res => {
        if (res.data) {
          res.data.forEach(function (item) {
            const jsonMap = _this.getItemJson(item)
            _this.historyList.push(jsonMap)
          })
        }
      })
    },
    getItemJson(item) {
      return item
    },
    toAdd(data) {
      if(data.stateStr == '暂存'){
        uni.navigateTo({
          url: '/pages/subPackages/resourceReservation_manage/edit?id=' + data.id
        })
      }else if(data.stateStr == '审核中'){
        this.show = true
        this.id = data.id
      }

    },
    confirm(e){
      console.log(this.content)
      const data = {
        id: this.id,
        cancelReason: this.content
      }
      cancelAppoint(data).then(res => {
        if (res.code == '200') {
          this.getList()
        }
      }).catch(err=>{
        this.$showToast(err);
      })
    }
  }
}
</script>

<style lang="scss">
    .historyListBody{
      margin-top: 24rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-bottom: 100rpx;
      .historyItem{
        width: 686rpx;
        padding: 24rpx 0;
        background: white;
        box-sizing: border-box;
        position: relative;
        border-radius: 16rpx;
        margin-bottom: 24rpx;
        .tags{
          width: 148rpx;
          height: 56rpx;
          position: absolute;
          top: 0;
          right: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 26rpx;
          color: rgba(3, 101, 249, 1);
          background: url('https://www.idea-sf.com/gardenProduct/image/bj04.png') no-repeat;
          background-size: 100%;
        }
        .historyItemTitle{
          padding: 8rpx 32rpx;
          width: 480rpx;
          color: rgba(34, 34, 34, 1);
          font-size: 32rpx;
          line-height: 40rpx;
          font-weight: 500;
        }
        .historyItemInfo{
          color: rgba(102, 102, 102, 1);
          font-size: 28rpx;
          padding: 10rpx 32rpx;
        }
        .historyItemBottom{
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 28rpx 32rpx 0 32rpx;
          border-top: 1px solid rgba(232, 237, 245, 1);
          margin-top: 22rpx;
          .typeInfo{
            font-size: 28rpx;
            color: rgba(226, 81, 0, 1);
          }
          .tgType{
            color: rgba(3, 101, 249, 1);
          }
          .qxType{
            color:rgba(242, 25, 18, 1);
          }
          .btn{
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28rpx;
            width: 160rpx;
            height: 60rpx;
            border-radius: 32rpx;
            border: 2rpx solid rgba(255, 107, 24, 1);
            color:rgba(255, 107, 24, 1);
            &::after{
              border: none;
            }
          }
          .zcBtn{
            background: linear-gradient( 316deg, #84AAFF 0%, #0365F9 100%);
            color: white;
            border: none;
          }
        }
      }

    }
    .dialogBox{
      padding: 32rpx;
    }
    .myField2 {
      .van-cell{
        background: #F5F7FA !important;
        border-radius: 8rpx;
        font-size: 28rpx;
      }
    }

</style>