settle_down_wx/pages/subPackages/venueRoom/meetingroom.vue

<template>
  <div class="peripheral">
    <van-tabs :active="active" @change="getActive" title-active-color="#1D18BC">
      <van-tab title="待办" name="待办">
        <div class="tabs-box">
          <div class="part-2">
            <div
              class="card-item white-card"
              v-for="item in list1"
              :key="item.id"
            >
              <div class="card-top" @click="goViewInfo(item)">
                <div class="card-left">
                  <p class="tit">{{ item.subject ? item.subject : "暂无" }}</p>
                  <div class="date">
                    <p>
                      预约时间：{{
                        item.appointtime ? item.appointtime : "暂无"
                      }}
                    </p>
                    <p>
                      经办时间：{{
                        item.handlerTime ? item.handlerTime : "暂无"
                      }}
                    </p>
                    <p v-if="item.cancelReason">
                      取消原因：{{ item.cancelReason }}
                    </p>
                  </div>
                </div>
                <div class="card-right">
                  <span class="z" v-if="item.state == '1'">等待审核</span>
                  <span class="y" v-if="item.state == '2'"> 等待付费</span>
                  <span class="y" v-if="item.state == '3'">等待确认</span>
                  <span class="g" v-if="item.state == '4'">预定成功</span>
                  <span class="h" v-if="item.state == '5'">已取消</span>
                </div>
              </div>
              <div class="card-bottom">
                <span
                  class="normal-button-app z-bt"
                  @click.stop="goViewInfo(item)"
                  >{{ item.state == "1" ? "审核" : "确认" }}</span
                >
                <span
                  class="normal-button-app y-bt"
                  @click.stop="cancelApple(item)"
                  >取消</span
                >
              </div>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="已办" name="已办">
        <div class="tabs-box">
          <div class="part-2">
            <!-- @click="goNavigator('meetingRoom-audit-app')" -->
            <div
              class="card-item white-card"
              v-for="item in list1"
              :key="item.id"
              @click="goViewInfoDetial(item)"
            >
              <div class="card-top">
                <div class="card-left">
                  <p class="tit">{{ item.subject ? item.subject : "暂无" }}</p>
                  <div class="date">
                    <p>
                      预约时间：{{
                        item.appointtime ? item.appointtime : "暂无"
                      }}
                    </p>
                    <p>
                      经办时间：{{
                        item.examineTime ? item.examineTime : "暂无"
                      }}
                    </p>
                    <p v-if="item.cancelReason">
                      取消原因：{{ item.cancelReason }}
                    </p>
                  </div>
                </div>
                <div class="card-right">
                  <span class="z" v-if="item.state == '1'">等待审核</span>
                  <span class="y" v-if="item.state == '2'"> 等待付费</span>
                  <span class="y" v-if="item.state == '3'">等待确认</span>
                  <span class="g" v-if="item.state == '4'">预定成功</span>
                  <span class="h" v-if="item.state == '5'">已取消</span>
                </div>
              </div>
              <div class="card-bottom">
                <!-- <span
                  class="normal-button-app z-bt"
                  @click.stop="goNavigator('meetingRoom-paymentVoucher')"
                  >确认</span
                >
                <span class="normal-button-app y-bt">取消</span> -->
              </div>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
// import auth from "@/service/auth";
import { listApp, cancelAppoint } from "@/js_sdk/venueRoom";
export default {
  data() {
    return {
      active: 0,
      currUser: {},
      list1: [
        {
          title: "指数基金投资培训会  ",
          timeStart: "2021/3/21 下午2：00",
          timeEnd: "2021/3/21 下午2：00",
          type: "1",
          text: "",
        },
        {
          title: "会议主题XXXXXXXXX  ",
          timeStart: "2021/3/21 下午2：00",
          timeEnd: "2021/3/21 下午2：00",
          type: "2",
          text: "",
        },
        {
          title: "会议主题XXXXXXXXX  ",
          timeStart: "2021/3/21 下午2：00",
          timeEnd: "2021/3/21 下午2：00",
          type: "3",
          text: "天气不好",
        },
        {
          title: "会议主题XXXXXXXXX  ",
          timeStart: "2021/3/21 下午2：00",
          timeEnd: "2021/3/21 下午2：00",
          type: "4",
          text: "天气不好",
        },
        {
          title: "会议主题XXXXXXXXX  ",
          timeStart: "2021/3/21 下午2：00",
          timeEnd: "2021/3/21 下午2：00",
          type: "5",
          text: "",
        },
      ],
    };
  },

  //   onLoad() {
  //     // this.currUser = auth.currUser();
  //     console.log(123123);
  //     // this.activeClick();
  //     this.getAppointList("1,3");
  //   },
  onShow() {
    console.log(this.active);
    if (this.active == 0) {
      this.getAppointList("1,3");
    } else {
      this.getAppointList("2,4,5");
    }
  },
  methods: {
    getActive(event) {
      this.active = event.detail.index;
      if (event.detail.index == 0) {
        this.getAppointList("1,3");
      } else {
        this.getAppointList("2,4,5");
      }
    },
    cancelApple(item) {
      console.log(item);
      let that = this;
      uni.showModal({
        title: "提示！",
        content: `是否确认取消【${item.subject}】的预约`,
        success(res) {
          if (res.confirm) {
            const reqData = {
              id: item.id,
            };
            cancelAppoint(reqData).then((res) => {
              if (res.key == 200) {
                that.$showToast("取消成功！");
                that.activeClick();
              }
            });
          }
        },
      });
    },
    activeClick() {
      if (this.active == 0) {
        this.getAppointList("1,3");
      } else {
        this.getAppointList("2,4,5");
      }
    },

    // 获取预约列表
    getAppointList(state) {
      this.list1 = [];
      const token = uni.getStorageSync("laocui_user_info");
      const reqData = {
        states: state,
      };
      if (this.active != 0) {
        // reqData.userId = JSON.parse(token).user.id;
      }
      listApp(reqData).then((res) => {
        res.data.forEach((e) => {
          console.log(e.handlerTime);
          console.log(this.$common.transDate(e.handlerTime));
          e.appointtime = this.$common.transDate(e.appointtime);

          e.examineTime = this.$common.transDate(e.examineTime);

          e.handlerTime = this.$common.transDate(e.handlerTime);
        });
        this.list1 = res.data;
      });
    },

    // 操作跳转页面
    goViewInfo(item) {
      console.log(item.state);
      if (item.state == "1") {
        uni.navigateTo({
          url:
            "/pages/subPackages/venueRoom/audit?id=" +
            item.id +
            "&readOnlyType=" +
            1,
        });

        // this.goNavigator("meetingRoom-audit-app", {
        //   id: item.id,
        //   readOnlyType: false,
        // });
      } else {
        uni.navigateTo({
          url:
            "/pages/subPackages/venueRoom/confirm?id=" +
            item.id +
            "&readOnlyType=" +
            1,
        });
      }
    },

    // 操作跳转页面
    goViewInfoDetial(item) {
      if (item.state == "1") {
        uni.navigateTo({
          url:
            "/pages/subPackages/venueRoom/audit?id=" +
            item.id +
            "&readOnlyType=" +
            0,
        });
      } else {
        console.log(123123);
        uni.navigateTo({
          url:
            "/pages/subPackages/venueRoom/confirm?id=" +
            item.id +
            "&readOnlyType=" +
            0,
          success: (success) => {},
          fail: (fail) => {
            console.log(fail);
          },
        });
      }
    },
  },
};
</script>

<style lang="scss" >
.normal-button-app {
  font-size: 26rpx;
  padding: 13rpx 35rpx;
  border-radius: 30rpx;
  margin-left: 26rpx;
  //  紫色
  &.z-bt {
    border: 1px solid #6600ff;
    background: #ecdfff;
    color: #6600ff;
  }
  // 黄色
  &.y-bt {
    border: 1px solid #ffa913;
    background: #fff7e8;
    color: #ffa913;
  }
  //绿色
  &.l-bt {
    border: 1px solid #54d478;
    background: #9bd8ac4d;
    color: #54d478;
  }
  //红色
  &.r-bt {
    border: 1px solid #f61212;
    background: #ffebeb;
    color: #e80f0f;
  }
  // 灰色
  &.h-bt {
    border: 1px solid #888888;
    background: #fafafa;
    color: #555555;
  }
}
.white-card {
  padding: 30rpx;
  background: #fff;
  box-shadow: 0px 0px 30rpx 0px rgba(0, 0, 0, 0.1);
  border-radius: 20rpx;
}
.peripheral {
  .tabs-box {
    margin: 40rpx 0;

    .part-2 {
      overflow-y: auto;
      height: calc(100vh - 240rpx);
      box-sizing: border-box;
      .card-item {
        margin: 0 30rpx 15rpx;
        .card-top {
          //   @include flex;
          display: flex;
          .card-left {
            display: flex;
            justify-content: space-between;
            flex-direction: column;
            width: 80%;
            .tit {
              width: 100%;
              font-size: 32rpx;
              color: #333;
              font-weight: bold;
              //   @include line-over;
              margin-bottom: 30rpx;
            }

            .date {
              line-height: 1.4;
              font-size: 28rpx;
              color: #999;
            }
          }
          .card-right {
            align-self: flex-start;
            span {
              font-size: 28rpx;
            }
            .z {
              color: #976dec;
            }
            .y {
              color: #ffb41f;
            }
            .g {
              color: #54d478;
            }
            .h {
              color: #999999;
            }
          }
        }
      }
      .card-bottom {
        height: 80rpx;
        display: flex;
        justify-content: flex-end;
        align-items: center;
      }
    }
  }
}
</style>