shangfutong-ui/jeepay-ui-uapp-agent/pageApply/components/ApplyCard.vue

<template>
  <JMainCard pd="0" wrapPd="15rpx 30rpx" @click="toParent">
    <view class="apply-header">
      <view class="apply-left">
        <view class="apply-logo bdR10" :style="{ backgroundColor: bgColor }">
          <image :src="icon" mode="scaleToFill" />
        </view>
        <view class="single-text-beyond">
          {{ ifName }}
          <text>{{ createdAt.split("-").join("/") }}</text>
        </view>
      </view>
      <view class="apply-right">
        <image :src="stateList[state].image" mode="scaleToFill" />
        {{ stateList[state].text }}
      </view>
    </view>
    <view class="apply-info">
      <view>
        <view>商户进件名</view>
        {{ mchFullName }}
      </view>
      <view class="info-mar">
        <view>用户号</view>
        {{ mchNo }}
      </view>
      <view>
        <view>进件单号</view>
        {{ applyId }}
      </view>
    </view>
    <view class="apply-err bdR10" v-if="applyErrorInfo && state === 3"> 驳回原因：{{ applyErrorInfo }} </view>
    <view class="button-wrapper">
      <view
        class="apply-button"
        hover-class="u-cell-hover"
        hover-stay-time="150"
        @tap.stop="copyApply(applyId,mchNo,ifCode)">创建副本</view>
      <view
        class="apply-button"
        hover-class="u-cell-hover"
        hover-stay-time="150"
        v-if="state == 1 || state == 4 || state == 5"
        @tap.stop="emits('getNewState')"
        >获取最新结果</view
      >
      <view
        class="apply-button"
        hover-class="u-cell-hover"
        hover-stay-time="150"
        v-if="state == 2"
        @tap.stop="toH5ApplyOptionPage(applyId, 'APP_CONFIG')"
        >参数配置</view
      >
      <view
        class="apply-button"
        hover-class="u-cell-hover"
        hover-stay-time="150"
        v-if="state == 2 || state == 1 || state == 4 || state == 5 || state == 6"
        @tap.stop="toH5ApplyOptionPage(applyId, 'NEXT_BIZS')"
        >签约开通</view
      >
    </view>
  </JMainCard>
  <SelectedPay :confirmBut="true" @confirm="confirm" />
</template>

<script setup>
import { reactive, ref } from "vue"
import JMainCard from "@/components/newComponents/JMainCard/JMainCard"
import SelectedPay from "./SelectedPay.vue"
const props = defineProps({
  ifName: { type: String },
  icon: { type: String },
  bgColor: { type: String },
  createdAt: { type: String },
  mchFullName: { type: String },
  mchNo: { type: String },
  applyId: { type: String },
  state: { type: Number },
  applyErrorInfo: { type: String },
  ifCode:{type:String}
})
const emits = defineEmits(["getNewState", "click"])
const stateList = reactive([
  {
    text: "草稿", //0
    image: "/static/iconImg/draft.svg",
  },
  {
    text: "审核中", //1
    image: "/static/iconImg/icon-apply-examine.svg",
  },
  {
    text: "已开通", //2
    image: "/static/equipmentImg/check.svg",
  },
  {
    text: "申请被驳回", //3
    image: "/static/iconImg/icon-apply-error.svg",
  },
  {
    text: "待验证", //4
    image: "/static/iconImg/icon-apply-examine.svg",
  },
  {
    text: "待签约", //5
    image: "/static/equipmentImg/check.svg",
  },
  {
    text: "", //6 占位
    image: "/static/equipmentImg/check.svg",
  },
  {
    text: "等待预审", //7
    image: "/static/iconImg/pending-review.svg",
  },
  {
    text: "预审拒绝", //8
    image: "/static/iconImg/passerror.svg",
  },
])
function confirm(){

}
const  toParent=()=>{
    emits('click')
}
function toH5ApplyOptionPage(applyId, configPage) {
  uni.navigateTo({ url: `/pageApply/applyDetailH5ApplyOption?applyId=${applyId}&configPage=${configPage}` })
}
// 创建副本
function copyApply(applyId,mchNo,ifCode){
  uni.navigateTo({url:`/pageApply/selectChannel?applyId=${applyId}&mchNo=${mchNo}&ifCode=${ifCode}`})
}
</script>

<style lang="scss" scoped>
.apply-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 30rpx 30rpx 30rpx 0;
  margin-left: 30rpx;
  border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
  .apply-left {
    display: flex;
    .apply-logo {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 30rpx;
      width: 93rpx;
      height: 93rpx;
      overflow: hidden;
      image {
        width: 40rpx;
        height: 40rpx;
      }
    }

    view {
      display: flex;
      flex-direction: column;
      font-size: 30rpx;
      font-weight: 700;
      text {
        margin-top: 16rpx;
        font-size: 25rpx;
        font-weight: 500;
        color: #8c8c8c;
      }
    }
  }
  .apply-right {
    display: flex;
    align-items: center;
    white-space: nowrap;
    image {
      width: 40rpx;
      height: 40rpx;
      margin-right: 10rpx;
    }
  }
}
.apply-info {
  padding: 30rpx;

  view {
    display: flex;
    font-size: 28rpx;
    view {
      width: 190rpx;
      color: #8c8c8c;
    }
  }
  .info-mar {
    margin: 23rpx 0;
  }
}
.apply-err {
  padding: 20rpx;
  margin: 30rpx;
  background-color: rgba(229, 61, 46, 0.1);
  word-break: break-all;
  font-size: 28rpx;
  color: #e53d2e;
}
.button-wrapper {
  display: flex;
  justify-content: flex-end;
  .apply-button {
    display: flex;
    align-items: center;
    height: 70rpx;
    padding: 0 33rpx;
    margin: 20rpx;
    margin-left: 0;
    border-radius: 10rpx;
    text-align: center;
    font-size: 28rpx;
    font-weight: 500;
    border: 1rpx solid rgba(179, 179, 179, 1);
    white-space: nowrap;
  }
  .u-cell-hover {
    opacity: 0.5;
  }
}
</style>