shangfutong-ui/jeepay-ui-uapp-agent/components/newComponents/JPreview/JPreview.vue

<template>
  <view class="pre-wrapper" :class="{ 'preview-two': props.preStyle == 'one', 'preview-one': props.preStyle == 'two' }">
    <view v-if="activeBox" class="active-box" :class="{ disabled: disabled, active: active }" @tap="emits('activeClick')">
      <image :src="imageList[disabled ? 0 : 1]" mode="scaleToFill" />
    </view>
    <view
      class="preview-list"
      :class="{
        'last-list': isLast,

        'last-none': props.borderNone,
      }"
      @tap="emits('click')"
    >
      <view class="content-box">
        <image :src="props.img" class="img" />
        <view class="content-describe">
          <text class="title single-text-beyond">{{ props.title }}
          <slot name="titleTag"/>
          </text>
          <text>{{ props.qrcId }}</text>
        </view>

        <slot>
          <view class="content-state">
            <view class="top">
              <view class="spot" :style="{ backgroundColor: props.spot }"></view>
              <view class="status">{{ props.status }}</view>
            </view>
            <text></text>
          </view>
        </slot>
      </view>

      <!-- 组件下部具名插槽 默认填充内容，图标，描述，号码 -->
      <slot name="bottom">
        <view class="info" v-if="mchName || mchNo">
          <image src="@/static/equipmentImg/mch-little.svg" mode="aspectFit" class="mch-img" />
          <view class="name">{{ props.mchName }}</view>
          <view class="number">{{ props.mchNo }}</view>
        </view>
      </slot>
    </view>
  </view>
</template>

<script setup>
/*
		列表预览组件
		默认插槽放到最右边
		具名插槽在下部
	 */
import { ref, reactive, nextTick, watchEffect } from 'vue'
const emits = defineEmits(['activeClick', 'click'])
const vdata = reactive({
  infoIsShow: false, // info板块是否展示
})

const props = defineProps({
  img: { type: String, default: '/static/equipmentImg/code-open.svg' },
  title: { type: String, default: '' },
  qrcId: { type: String, default: '' },
  spot: { type: String, default: '#fff' },
  status: { type: String, default: '' },
  mchName: { type: String, default: '' },
  mchNo: { type: String, default: '' },
  isLast: { type: Boolean, default: false }, // 最后一个列表，下划线通底
  borderNone: { type: Boolean, default: false }, // 最后一个下划线隐藏
  preStyle: { type: String, default: '' }, // 预制的主题颜色，在最下方
  disabled: { type: Boolean, default: false }, //是否禁用默认否
  active: { type: Boolean, default: false }, //是否选中默认未选中
  activeBox: { type: Boolean, default: false }, // 是否显示 勾选框 默认不显示
})

const imageList = ['/static/iconImg/icon-disabled.svg', '/static/iconImg/icon-active.svg']
</script>

<style scoped lang="scss">
.pre-wrapper {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 30rpx;
  position: relative;
  box-sizing: border-box;
  .active-box {
    flex-shrink: 0;
    flex-grow: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 30rpx;
    width: 36rpx;
    height: 36rpx;
    border-radius: 6rpx;
    border: 2rpx solid #d9d9d9;

    image {
      width: 100%;
      height: 100%;
    }
  }
  .active {
    background-color: #2980fd;
  }
  .disabled {
    background-color: #f2f2f2;
  }
}
.preview-list {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  // 下边框线
  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    height: 1px;
    width: calc(100% - 30rpx);
    background-color: #d9d9d9;
    transform: scaleY(0.5);
  }

  // 纯图片
  .img {
    flex-grow: 0;
    flex-shrink: 0;
    width: 93rpx;
    height: 93rpx;
    margin-right: 25rpx;
  }

  // 左侧内容
  .content-box {
    flex: 1;
    display: flex;
    justify-content: space-between;

    .content-describe {
      flex: 1;
      color: #8c8c8c;
      font-size: 25rpx;
      // width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      line-height: 35rpx;
      .title {
        width: 380rpx;
        font-size: 33rpx;
        color: #000;
        line-height: 46rpx;
      }
    }
  }

  // 右侧内容 默认为状态点以及文字
  .content-state {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .top {
      display: flex;
      align-items: center;
      .spot {
        width: 10rpx;
        height: 10rpx;
        border-radius: 50%;
        margin-right: 16rpx;
        background-color: #000;
      }
      .status {
        font-size: 30rpx;
        line-height: 46rpx;
        white-space: nowrap;
        color: #666;
      }
    }
  }

  // 底部样式
  .info {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 20rpx;
    box-sizing: border-box;
    background-color: #f7f7f7;
    border-radius: 10rpx;
    margin-top: 20rpx;

    .mch-img {
      width: 40rpx;
      height: 40rpx;
      flex-shrink: 0;
    }
    .name {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin: 0 10rpx;
      color: #000;
      font-size: 28rpx;
      flex-grow: 1;
    }
    .number {
      white-space: nowrap;
      color: #8c8c8c;
      font-size: 28rpx;
    }
  }
}

.last-list {
  // 下边框线
  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    height: 1rpx;
    width: 100%;
    background-color: #e5e5e5;
  }
}

.last-none {
  // 下边框线
  &::after {
    height: 0;
  }
}

// 预制样式1 开启状态 标题白色 id 白色0.6
.preview-one {
  background: rgba(0, 0, 0, 0.1);
  .content-box {
    .content-describe {
      color: rgba(255, 255, 255, 0.6);
      .title {
        color: #ffffff;
      }
    }
  }
}

// 预制样式2 关闭状态 标题白色 id 白色0.6
.preview-two {
  background: rgba(0, 0, 0, 0.1) !important;
  .content-box {
    .content-describe {
      color: rgba(255, 255, 255, 0.5);
      .title {
        color: rgba(255, 255, 255, 0.5);
      }
    }
  }
}
</style>