horzi_rai_wxa/pages-purchaser/components/infoCard.vue

<template>
  <view class="info-card-detail" :style="{ 'background-image': pagesType == '专栏详情' ? 'url(' + authorDetail.BgImg + ')' : '' }">
    <view class="name-author">
      <view class="author-img">
        <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
          <image :src="authorDetail.HeadImg"></image>
        </button>
        <view class="set-btn" v-if="pagesType == '专栏详情'" @click.stop="editMyColumn"> 编辑专栏</view>
      </view>
      <view class="name-box">
        <text>{{ authorDetail.SpecialName }}</text>
        <text>{{ authorDetail.NickName }}</text>
      </view>
    </view>
    <view class="info-card-lable">
      <text v-for="item in dataProcessing(authorDetail.Label)" :key="item">{{ item }}</text>
    </view>
    <view class="info-card-fans">
      <text>{{ authorDetail.SpecialArticleNum }}</text>
      <text>文章</text>
      <text>{{ authorDetail.CollectNum }}</text>
      <text>被收藏</text>
      <text>{{ authorDetail.FollowNum }}</text>
      <text>粉丝</text>
    </view>
    <view style="color: #fff; margin-top: 20rpx"> {{ authorDetail.Introduction }}</view>
  </view>
</template>

<script>
import { purchaserApi, uploadurl } from "@/config/api";

export default {
  props: {
    authorDetail: {
      type: Object,
      default: {},
    },
    pagesType: {
      type: String,
      default: "",
    },
  },
  data() {
    return {};
  },
  methods: {
    // 数据处理
    dataProcessing(item) {
      return item ? item.split(",") : [];
    },
    //点击了头像
    onChooseAvatar(e) {
      let token = this.$db.get("access_token");
      let authHeader = token || "";
      let that = this;
      uni.uploadFile({
        url: uploadurl,
        filePath: e.detail.avatarUrl,
        header: {
          "Content-Type": "multipart/form-data",
          Authorization: authHeader,
        },
        name: "file",
        success: async (resImg) => {
          let data = JSON.parse(resImg.data);
          const resUp = await purchaserApi.yanxuanSpecialAuthorImg({
            HeadImg: data.Data.ResourceUrl,
            UserId: that.authorDetail.UserId,
          });
          if (resUp.Ret === 200) {
            that.$parent.authorDetail.HeadImg = data.Data.ResourceUrl;
          }
        },
      });
    },
    editMyColumn() {
      if (this.pagesType == "专栏详情") {
        this.$emit("editColumnHandler");
      }
    },
  },
};
</script>

<style lang="scss" scope>
.info-card-detail {
  border-radius: 16rpx;
  background-size: 100% 100%;
  // 上面的那个盒子用就把上面的样式去掉
  width: 100%;
  padding: 40rpx 35rpx;
  background-repeat: no-repeat;
  color: #fff;
  .name-author {
    display: flex;
    background: rgba(0, 0, 0, 0);
    .author-img {
      position: relative;
      display: flex;
      justify-content: center;
      width: 126rpx;
      height: 138rpx;
      text-align: center;
      background: rgba(0, 0, 0, 0);
      .avatar-wrapper {
        background: rgba(0, 0, 0, 0);
      }
      image {
        background: rgba(0, 0, 0, 0);
        width: 111rpx;
        height: 111rpx;
        border-radius: 50%;
      }
      .set-btn {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        left: 0;
        bottom: 0;
        width: 126rpx;
        height: 48rpx;
        border-radius: 150rpx;
        background-color: #376cbb;
        color: #fff;
        z-index: 9;
      }
    }
    .name-box {
      margin-left: 20rpx;
      text:nth-child(1) {
        font-size: 36rpx;
        font-weight: 500;
        line-height: 50rpx;
        padding: 20rpx 0;
      }
      text:nth-child(2) {
        font-size: 28rpx;
        font-weight: 400;
        line-height: 39rpx;
      }
    }
  }
  .info-card-lable {
    display: flex;
    flex-wrap: wrap;
    text {
      display: flex;
      align-items: center;
      height: 45rpx;
      padding: 0 12rpx;
      border-radius: 150rpx;
      background-color: #8994a1;
      margin: 20rpx 20rpx 0rpx 0;
    }
  }
  .info-card-fans {
    margin-top: 20rpx;
    display: flex;
    align-items: center;
    text:nth-child(2n + 1) {
      color: #ffe8a8;
      font-size: 38rpx;
      font-weight: 500;
    }
    text:nth-child(2n) {
      margin: 0 40rpx 0 5rpx;
    }
  }
}
</style>