zhishifufei_uniapp/pages/special/gift_receive.vue

<template>
  
  <BaseContainer class="receive-details">
    <NavBar title="领取详情" />
    <template v-if="special.user">
      <view class="white">
        <view class="header acea-row row-center-wrapper row-column">
          <view class="name">
            <image :src="userInfo.avatar" />{{ userInfo.nickname }}发礼物啦
          </view>
          <view>{{ special.title }}</view>
        </view>
        <view class="padding">
          <view class="receive" v-if="special.is_gift">已领取1/1个</view>
          <view class="receive" v-else>已领取0/1个</view>
          <view class="pic-text acea-row row-between-wrapper">
            <template v-if="special.user.length!=0">
              <view class="pictrue">
                <image :src="special.user.avatar" />
              </view>
              <view class="text">
                <view class="name line1">{{ special.user.nickname }}</view>
                <view class="acea-row row-between-wrapper">
                  <view>{{ special.add_time }}</view>
                  <view>已领取</view>
                </view>
              </view>
            </template>
          </view>
          <view class="pictrue3">
            <image :src="special.image" />
          </view>
        </view>
      </view>
    </template>
  </BaseContainer>
</template>

<script>
import { getGiftReceiveInfo } from "@/api/special";

export default {
  data() {
    return {
      special_id: "",
      special: {},
      userInfo: {},
    };
  },
  onLoad(options) {
    this.special_id = options.orderId;
    this.getData();
  },
  methods: {
    async getData() {
      uni.showLoading({ mask: true });
      try {
        const { data } = await getGiftReceiveInfo(this.special_id);
        this.special = data.special;
        this.userInfo = data.userInfo;
        uni.hideLoading();
      } catch (err) {
        uni.hideLoading();
        this.$util.showMsg(err.msg);
      }
    },
  },
};
</script>

<style>
page {
  background-color: #509efb;
}
</style>

<style scoped lang="scss">
.receive-details {
  // padding: 0 30rpx;
}

.receive-details .white {
  background-color: #ffffff;
  border-radius: 10rpx;
  width: 90%;
  margin: auto;
  margin-top: 38rpx;
}

.receive-details .white .header {
  background-image: url(getAssetsPath("/wap/first/zsff/images/receive-bg.png"));
  background-repeat: no-repeat;
  background-size: 100% 100%;
  // width: 690rpx;
  height: 255rpx;
  font-size: 32rpx;
  font-weight: bold;
  border-radius: 10rpx 10rpx 0 0;
}

.receive-details .white .header .name {
  position: relative;
}

.receive-details .white .header .name image {
  width: 45rpx;
  height: 45rpx;
  border-radius: 50%;
  position: absolute;
  left: -57rpx;
}

.receive-details .white .padding {
  padding: 0 27rpx 35rpx 27rpx;
}

.receive-details .white .padding .receive {
  font-size: 28rpx;
  color: #999999;
  border-bottom: 1px solid #e6e6e6;
  margin-top: 32rpx;
}

.receive-details .white .padding .pic-text {
  margin: 32rpx 0;
}

.receive-details .white .padding .pic-text .pictrue {
  width: 97rpx;
  height: 97rpx;
}

.receive-details .white .padding .pic-text .pictrue image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.receive-details .white .padding .pic-text .text {
  width: 500rpx;
  font-size: 32rpx;
  color: #a0a0a0;
  padding-right: 16rpx;
}

.receive-details .white .padding .pic-text .text .name {
  color: #333;
  font-weight: bold;
}

.receive-details .white .padding .pictrue3 {
  // width: 636rpx;
  height: 272rpx;
}

.receive-details .white .padding .pictrue3 image {
  width: 100%;
  height: 100%;
  border-radius: 10rpx;
}

.receive-details .pictrue4 {
  width: 690rpx;
  height: 289rpx;
  margin: 30rpx 0;
}

.receive-details .pictrue4 image {
  width: 100%;
  height: 100%;
  border-radius: 10rpx;
}
</style>