cd-rclv-weixin/pages/bindCard.vue

<template>
  <view class="container">
    <!-- 卡片展示区域 -->
    <view class="bind-card" style="position: relative; overflow: hidden">
      <image class="card-bg-img" src="/static/BCardBand.png"></image>
      <view class="card-content" style="margin-top: 27rpx">
        <view class="card-content-top">
          <view class="card-header">
            <image
              :src="baseUrl + cardInfo.photoPath"
              style="width: 170rpx; height: 220rpx"
              mode="aspectFill"
            ></image>
          </view>
          <view class="card-info">
            <view class="info-item">
              <text class="label">姓&nbsp;&nbsp;&nbsp; 名:</text>
              <text class="value">{{ cardInfo.chineseName }}</text>
            </view>
            <view class="info-item">
              <text class="label">性&nbsp;&nbsp;&nbsp; 别:</text>
              <text class="value">{{
                cardInfo.gender == "0" ? "男" : "女"
              }}</text>
            </view>
            <view class="info-item">
              <text class="label">工作单位:</text>
              <text class="value">{{ cardInfo.yjrcXianDanWeiZhiWu }}</text>
            </view>
            <view class="info-item">
              <text class="label">证&nbsp;件&nbsp;号:</text>
              <text class="value">{{ cardInfo.idNum }}</text>
            </view>
            <view class="info-item">
              <text class="label">有效期至:</text>
              <text class="value">{{ cardInfo.cardYouxiaoDate }}</text>
            </view>
          </view>
        </view>
        <view class="card-content-bottom">
          中共承德市委人才工作领导小组办公室 制发
        </view>
      </view>
    </view>
    <view class="carinfo-content">
      <view class="carInfo">
        <view
          v-if="
            cardYouxiaoDate(cardInfo.cardYouxiaoDate) > 0 ||
            cardInfo.cardYouxiaoDate == '长期'
          "
          class="carInfo-carDate"
          :style="{
            color:
              cardInfo.cardYouxiaoDate != '长期' &&
              cardYouxiaoDate(cardInfo.cardYouxiaoDate) > 0
                ? '#F56C6C'
                : '#409EFF',
          }"
        >
          <text style="color: #fff" v-if="cardInfo.cardYouxiaoDate == '长期'">
            长期
          </text>
          <text style="color: #fff" v-else>已超期</text>
        </view>
        <view class="carInfo-item">
          <view class="carInfo-item-label">卡号：</view>
          <view class="carInfo-item-value">{{ cardInfo.cardNumber }}</view>
        </view>
        <view class="divider"></view>

        <view class="carInfo-item">
          <view class="carInfo-item-label">类型：</view>

          <view class="carInfo-item-value" v-if="cardInfo.cardType == 'A'"
            >{{ cardInfo.cardType }}类人才</view
          >
          <view class="carInfo-item-value" v-else>
            {{ cardInfo.bcardType }}类人才
          </view>
        </view>
        <view class="divider"></view>

        <view class="carInfo-item">
          <view class="carInfo-item-label">状态：</view>
          <view
            class="carInfo-item-value"
            :style="{ color: cardInfo.isZhuxiao == 0 ? '#409EFF' : '#F56C6C' }"
          >
            <text
              style="color: #f56c6c"
              v-if="
                cardInfo.cardYouxiaoDate != '长期' &&
                cardYouxiaoDate(cardInfo.cardYouxiaoDate) > 0
              "
            >
              已超期
            </text>
            <text v-else>{{
              cardInfo.isZhuxiao == 0 ? "正常" : "已注销"
            }}</text>
          </view>
        </view>
        <view class="divider"></view>
        <view class="carInfo-item">
          <view class="carInfo-item-label">工作单位：</view>
          <view class="carInfo-item-value">{{
            cardInfo.yjrcXianDanWeiZhiWu
          }}</view>
        </view>
        <view class="divider"></view>
        <view class="carInfo-item">
          <view class="carInfo-item-label">联系电话：</view>
          <view class="carInfo-item-value">{{ cardInfo.shouJiNum }}</view>
        </view>
        <view class="divider"></view>
        <view class="carInfo-item">
          <view class="carInfo-item-label">人才类别：</view>
          <view class="carInfo-item-value">{{ cardInfo.renCaiType }}</view>
        </view>
        <view class="divider"></view>
        <view class="carInfo-item">
          <view class="carInfo-item-label">人才称号：</view>
          <view class="carInfo-item-value">{{ cardInfo.renCaiChengHao }}</view>
        </view>
        <view class="divider"></view>
        <view class="carInfo-item">
          <view
            class="carInfo-item-label"
            :style="{
              color:
                cardInfo.cardYouxiaoDate != '长期' &&
                cardYouxiaoDate(cardInfo.cardYouxiaoDate) > 0
                  ? 'red'
                  : '',
            }"
            >有效期至：</view
          >
          <view
            class="carInfo-item-value"
            :style="{
              color:
                cardInfo.cardYouxiaoDate != '长期' &&
                cardYouxiaoDate(cardInfo.cardYouxiaoDate) > 0
                  ? 'red'
                  : '',
            }"
            >{{ cardInfo.cardYouxiaoDate }}</view
          >
        </view>
      </view>
    </view>
    <!-- 绑定按钮 -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      cardInfo: {
        photoPath: "",
        chineseName: "",
        gender: "",
        yjrcXianDanWeiZhiWu: "",
        idNum: "",
        cardYouxiaoDate: "",
        cardNumber: "",
        cardType: "",
        bcardType: "",
        isZhuxiao: "",
        renCaiType: "",
        renCaiChengHao: "",
        shouJiNum: "",
      },
      baseUrl: getApp().globalData.baseUrl,
    };
  },
  onLoad(options) {
    this.getCardInfo(options);
  },
  methods: {
    cardYouxiaoDate(date) {
      return new Date().getTime() - new Date(date).getTime();
    },
    getCardInfo(options) {
      uni.showLoading({
        title: "加载中",
      });
      uni.request({
        url:
          this.baseUrl +
          "/wxsfrz/selRenCai?name=" +
          options.name +
          "&sfzh=" +
          options.sfzh,
        method: "POST",
        success: ({ data }) => {
          this.cardInfo = data.rclkTalentList;
          uni.hideLoading();
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.card-bg-img {
  position: absolute;
  width: 100%;
  height: 100%;
}
.carInfo {
  overflow: hidden;
  position: relative;
  .carInfo-carDate {
    display: inline-block;
    position: absolute;
    top: 6px;
    right: -34px;
    width: 200rpx;
    height: 50rpx;
    font-size: 24rpx;
    color: #fff;
    background: #f56c6c;
    text-align: center;
    line-height: 50rpx;
    transform: rotate(45deg);
  }
}
.card-content-bottom {
  font-size: 25rpx;
  color: #fff;
  margin-top: 20rpx;
  text-align: center;
  width: 100%;
}
.card-content-top {
  display: flex;
  align-items: center;
  .card-header {
    margin-right: 50rpx;
  }
}
.divider {
  margin: 20rpx 0 25rpx;
  width: 100%;
  height: 1rpx;
  background: #e1edf9;
}
.carInfo-item-label {
  font-size: 28rpx;
  color: #333;
}
.carInfo-item {
  padding: 0 10rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.carInfo-item-value {
  font-size: 26rpx;
  color: #333;
  width: 471rpx;
  text-align: right;
}
.carInfo {
  margin: 30rpx auto 0;
  padding: 60rpx 25rpx;
  border-radius: 7rpx;
  background: #fff;
  box-shadow: #959da533 0px 8px 24px;
}
.container {
  min-height: 100vh;
  background: linear-gradient(180deg, #0066ff 0%, #4080ff 8%, #ffffff 50%);
  padding: 30rpx;
  padding-top: 50rpx;
  overflow: hidden;
}

.bind-card {
  height: 391rpx;
  margin: 20rpx auto 30rpx;
  border-radius: 10rpx;
  overflow: hidden;
  position: relative;

  .card-content {
    box-shadow: #959da533 0px 8px 24px;

    position: relative;
    padding: 30rpx;
    height: 100%;
    padding-left: 30rpx;
    margin-bottom: 30rpx;
    .card-title {
      font-size: 38rpx;
      color: black;
      margin-bottom: 8rpx;
    }

    .card-issuer {
      font-size: 22rpx;
      color: #666;
      margin-bottom: 30rpx;
    }
    .card-info {
      .info-item {
        display: flex;
        margin-bottom: 20rpx;
        font-size: 22rpx;
        letter-spacing: 2rpx;
        .label {
          color: black;

          width: 110rpx;
        }
        .value {
          color: #333;
          flex: 1;
        }
      }
    }
  }
}
</style>