zhishifufei_uniapp/components/ApplyDialog/index.vue

<template>
  <view :class="{ show: show }" class="apply-dialog">
    <view class="mask"></view>
    <view class="dialog">
      <view>
        <image mode="aspectFill" v-if="status === 0" :src="getImgPath(images[0])" />
        <image mode="aspectFill" v-if="status === -1" :src="getImgPath(images[1])" />
        <image mode="aspectFill" v-if="status === 1" :src="getImgPath(images[2])" />
      </view>
      <view v-if="status === 0" class="title">申请待审核</view>
      <view v-if="status === -1" class="title fail">审核失败</view>
      <view v-if="status === 1" class="title success">审核成功</view>
      <view v-if="status === 0" class="message">您的申请工作人员正在审核，稍后再试</view>
      <view v-if="status === -1" class="message">{{ fail }}</view>
      <view v-if="status === 1" class="message">您已申请成功，快去上传您的课程吧！</view>
      <view class="btn-group">
        <view
          v-if="page.indexOf('merchant') !== -1 && status === 0"
          class="btn flex flex-center"
          @click="goBack"
        >
          知道了
        </view>
        <navigator
          v-if="page.indexOf('merchant') === -1 && (status === 0 || status === 1)"
          class="btn flex flex-center"
          :url=" thetype  == 1 ? '/pages/merchant/index': '/pages/merchant/agent'"
        >
          查看申请
        </navigator>
        <navigator
          v-if="page.indexOf('merchant') === -1 && status === -1"
          class="btn flex flex-center"
          :url="thetype  == 1 ? '/pages/merchant/index': '/pages/merchant/agent'"
        >
          重新申请
        </navigator>
      </view>
      <view class="close-btn" type="button" @click="$emit('update:show', false)">
        <i class="iconfont iconcha3"></i>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: ["show", "status","thetype","fail"],
  data() {
    return {
      images: ['/static/frontend/1.png', '/static/frontend/2.png', '/static/frontend/3.png'],
      page: "href",
    };
  },
  methods: {
    goBack() {
        this.$emit('update:show', false);
    },
  },
};
</script>

<style scoped lang="scss">
.apply-dialog {
  display: none;
  opacity: 0;
}

.apply-dialog.show {
  display: block;
  opacity: 1;
}

.apply-dialog .dialog {
  position: fixed;
  top: 50%;
  right: 75rpx;
  left: 75rpx;
  z-index: 56;
  display: flex;
  flex-direction: column;
  max-height: 90%;
  padding: 55rpx 60rpx;
  border-radius: 16rpx;
  background-color: #ffffff;
  transform: translateY(-50%);
  text-align: center;
}

.apply-dialog .dialog image {
  width: 250rpx;
  height: 180rpx;
  object-fit: contain;
  vertical-align: middle;
}

.apply-dialog .dialog .title {
  margin-top: 50rpx;
  font-weight: 600;
  font-size: 32rpx;
  line-height: 45rpx;
  color: #2c8eff;
}

.apply-dialog .dialog .title.fail {
  color: #fc6a0a;
}

.apply-dialog .dialog .title.success {
  color: #e93323;
}

.apply-dialog .dialog .message {
  flex: 1;
  margin-top: 12rpx;
  overflow-x: hidden;
  overflow-y: auto;
  font-size: 26rpx;
  line-height: 37rpx;
  color: #999999;
}

.apply-dialog .dialog .btn-group {
  margin-top: 60rpx;
}

.apply-dialog .dialog .btn {
  width: 100%;
  height: 86rpx;
  border-radius: 43rpx;
  background-color: #2c8eff;
  font-size: 32rpx;
  color: #ffffff;
}

.apply-dialog .dialog .close-btn {
  position: absolute;
  top: 15rpx;
  right: 15rpx;
  line-height: 1;
}

.apply-dialog .dialog .close-btn .iconfont {
  font-size: 43rpx;
  color: #cccccc;
}
</style>