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">
        <view class="img-box">
          <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
            <image :src="authorDetail.HeadImg"></image>
          </button>
        </view>
        <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>
</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;
      wx.cropImage({
        src: e.detail.avatarUrl,
        cropScale: "1:1",
        success(res) {
          console.log(res.tempFilePath);
          uni.uploadFile({
            url: uploadurl,
            filePath: res.tempFilePath,
            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) {
                this.$parent.authorDetail.HeadImg = data.Data.ResourceUrl;
              }
            },
          });
        },
      });
    },
    editMyColumn() {
      if (this.pagesType == "专栏详情") {
        this.$parent.isEditInfo = false;
      }
    },
  },
};
</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;

    .author-img {
      position: relative;
      display: flex;
      justify-content: center;
      width: 126rpx;
      height: 138rpx;
      text-align: center;
      .img-box {
        width: 110rpx;
        height: 110rpx;
        display: flex;
        justify-content: center;
        align-content: center;
        border-radius: 50%;
        overflow: hidden;
        image {
          width: 111rpx;
          height: 111rpx;
        }
      }
      .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 {
      height: 45rpx;
      padding: 6rpx 12rpx 6rpx 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>