print-package-app/pages/apply-detail/index.vue

<template>
  <view class="content">
    <uni-nav-bar left-icon="back" @clickLeft="back" statusBar fixed title="申请详情"></uni-nav-bar>
    <view class="flex-col group_4">
      <view class="flex-col">
        <view class="flex-col items-center text-wrapper" v-if="info.status == applyingTypeEnum.WAITING">
          <text>通过后该用户可查看设备的视频信息、生产信息。</text>
        </view>
        <view v-else class="center-text-wrapper flex-col items-center view_1" :class="bgMap[info.status].bg">
          <text>{{ bgMap[info.status].text }}</text>
        </view>
        <view class="flex-col section_1">
          <view class="flex-row">
            <text class="text_5">用户名：</text>
            <text class="text_6">{{ info.userName }}</text>
          </view>
          <view class="flex-row group_7">
            <text class="text_7">手机号：</text>
            <text class="text_8">{{ info.mobile }}</text>
          </view>
          <view class="flex-row group_8">
            <text class="text_9">企业名：</text>
            <text class="text_10">{{ info.enterpriseName }}</text>
          </view>
          <view class="flex-row group_9">
            <text class="text_11">申请时间：</text>
            <text class="text_12">{{ info.createTime }}</text>
          </view>
        </view>
      </view>
      <view class="flex-row group_10" v-if="info.status == applyingTypeEnum.WAITING">
        <view class="flex-col items-center text-wrapper_1" @click="handle(2)">
          <text>拒绝</text>
        </view>
        <view class="flex-col items-center text-wrapper_2" @click="handle(1)">
          <text>通过</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { go2, back } from '@/utils/hook.js'
import { applyingTypeEnum } from '@/enums/index'
import { getApplyingInfo, handleApplying } from '@/apis/applyApi'
const bgMap = {
  [applyingTypeEnum.WAITING]: {
    bg: 'waiting-bg',
    text: '待处理'
  },
  [applyingTypeEnum.AGREE]: {
    bg: 'agree-bg',
    text: '已同意'
  },
  [applyingTypeEnum.REJECT]: {
    bg: 'reject-bg',
    text: '已拒绝'
  },
  [applyingTypeEnum.EXPIRED]: {
    bg: 'expired-bg',
    text: '已过期'
  }
}
export default {
  data() {
    return {
      bgMap: Object.freeze(bgMap),
      id: null,
      info: {
        status: applyingTypeEnum.WAITING
      },
      applyingTypeEnum: Object.freeze(applyingTypeEnum)
    }
  },
  onLoad(options) {
    if (options.id) {
      this.id = options.id
      getApplyingInfo({ id: this.id }).then((res) => {
        if (res) {
          this.info = res
        }
      })
    } else {
      uni.showToast({
        title: '参数错误,即将跳转',
        success: () => {
          setTimeout(() => {
            back()
          }, 1500)
        }
      })
    }
  },
  methods: {
    go2,
    back,
    handle(handleResult) {
      uni.showModal({
        title: '提示',
        content: '确定要操作吗？',
        success: (res) => {
          if (res.confirm) {
            handleApplying({ id: this.id, handleResult }).then((res) => {
              if (res) {
                uni.showToast({
                  title: '操作成功',
                  success: () => {
                    setTimeout(() => {
                      back()
                    }, 1500)
                  }
                })
              }
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 750rpx;
}
.group_4 {
  position: relative;
  flex: 1 1 auto;
  overflow-y: auto;
  .center-text-wrapper {
    color: rgb(255, 255, 255);
    font-size: 28rpx;
    font-weight: 500;
    line-height: 40rpx;
    white-space: nowrap;
  }
  .view_1 {
    padding: 5rpx 0;
    border-radius: 0px 0px 0px 20rpx;
    width: 120rpx;
    position: absolute;
    right: 0;
    top: 0;
  }
  .group_10 {
    margin-top: 140rpx;
    padding: 0 32rpx;
    .text-wrapper_1 {
      padding: 21rpx 0;
      flex: 1 1 332rpx;
      color: rgb(238, 10, 36);
      font-size: 30rpx;
      font-weight: 500;
      line-height: 42rpx;
      white-space: nowrap;
      background-color: rgb(255, 255, 255);
      border-radius: 10rpx;
      height: 88rpx;
      border: solid 2rpx rgb(238, 10, 36);
    }
    .text-wrapper_2 {
      margin-left: 22rpx;
      padding: 23rpx 0;
      flex: 1 1 332rpx;
      color: rgb(255, 255, 255);
      font-size: 30rpx;
      font-weight: 500;
      line-height: 42rpx;
      white-space: nowrap;
      background-color: rgb(0, 122, 255);
      border-radius: 10rpx;
      height: 88rpx;
    }
  }
  .text-wrapper {
    padding: 17rpx 0;
    color: rgb(0, 122, 255);
    font-size: 30rpx;
    line-height: 42rpx;
    white-space: nowrap;
    background-color: rgb(229, 241, 255);
  }
  .section_1 {
    padding: 16rpx 32rpx 31rpx;
    background-color: rgb(255, 255, 255);
    .group_7 {
      margin-top: 15rpx;
      .text_7 {
        color: rgb(136, 136, 136);
        font-size: 28rpx;
        line-height: 40rpx;
        white-space: nowrap;
      }
      .text_8 {
        margin-left: 90rpx;
        color: rgb(51, 51, 51);
        font-size: 28rpx;
        line-height: 40rpx;
        white-space: nowrap;
      }
    }
    .group_8 {
      margin-top: 14rpx;
      .text_9 {
        color: rgb(136, 136, 136);
        font-size: 28rpx;
        line-height: 40rpx;
        white-space: nowrap;
      }
      .text_10 {
        margin-left: 90rpx;
        color: rgb(51, 51, 51);
        font-size: 28rpx;
        line-height: 40rpx;
        white-space: nowrap;
      }
    }
    .group_9 {
      margin-top: 14rpx;
      .text_11 {
        color: rgb(136, 136, 136);
        font-size: 28rpx;
        line-height: 40rpx;
        white-space: nowrap;
      }
      .text_12 {
        margin-left: 62rpx;
        color: rgb(51, 51, 51);
        font-size: 28rpx;
        line-height: 40rpx;
        white-space: nowrap;
      }
    }
    .text_5 {
      color: rgb(136, 136, 136);
      font-size: 28rpx;
      line-height: 40rpx;
      white-space: nowrap;
    }
    .text_6 {
      margin-left: 90rpx;
      color: rgb(51, 51, 51);
      font-size: 28rpx;
      line-height: 40rpx;
      white-space: nowrap;
    }
  }
}
.agree-bg {
  background-color: rgba(19, 194, 194, 0.6);
}
.reject-bg {
  background-color: rgba(255, 122, 69, 0.6);
}
.expired-bg {
  background-color: rgb(217, 217, 217);
}
.waiting-bg {
  background-color: rgba(89, 126, 247, 0.6);
}
</style>