xdd-uniapp-new/pkg_user/views/gift/components/GiftCard.vue

<template>
  <view class="mask">
    <view class="gift-card-modal" >
      <image class="bg-image" :src="card.cover" mode="aspectFit|aspectFill|widthFix" lazy-load="false"></image>
      <view class="image-wrap" v-if="!card.isReceive">
        <image class="pro-image" :src="card.giftProducts[0].productImage" mode="aspectFit|aspectFill|widthFix" lazy-load="false" @error="" @load="">
          
        </image>
      </view>
      <view class="wrap-box">
        
      </view>
      <view class="auto-text-color" v-if="!card.isReceive">
        {{ card.message || '礼笺轻启，礼藏心意' }}
      </view>
      <view v-if="isReceive && !card.isReceive" @click="toOrder" style="z-index: 89999">
        <view class="address-btn v12-white v12-primary-text">
          您已领取礼包
        </view>
        <view class="v12-text-center v12-font-26 v12-white-text v12-mt-3">查看礼包详情>></view>
      </view>
      <view v-if="card.isReceive" @click="toHome" style="z-index: 89999">
        <view class="address-btn v12-white v12-primary-text">
          礼包已被领取
        </view>
        <view class="v12-text-center v12-font-26 v12-white-text v12-mt-3">去商城看看>></view>
      </view>
      <!-- 弹窗内容 -->
      <view v-if="!isReceive && !card.isReceive" class="address-btn v12-white v12-primary-text" @click="setAddress">
        填写地址并收下
      </view>
      <button open-type="share" class="share-btn v12-white v12-primary-text" v-if="card.canTransfer !== 0 && !isReceive">
        点击转增给好友
      </button>
      <view class="tips">
        <view class="tip-text v12-mr-1">
          未领取礼包，将于24小时后自动
        </view>
        <u-icon @click="showTips" name="error-circle" color="#fff" size="28rpx"></u-icon>
      </view>
    </view>
    <giftTips ref="giftTips" :richText="giftNotice"></giftTips>
    <AddressDialog ref="addressDialog" @save="getReceive"></AddressDialog>
    <AddressList ref="AddressList" :addressList="address" @save="getReceive"></AddressList>
  </view>
</template>

<script>
import { getGiftCardSendNotice, getGiftCardReceive } from '@/api/gift'
import { getAddressList } from '@/api/user'
import giftTips from './giftTips.vue'
import AddressDialog from './AddressDialog.vue'
import AddressList from './AddressList.vue'
export default {
  name: 'GiftCard',
  components: {
    giftTips,
    AddressDialog,
    AddressList
  },
  props: {
    // 组件属性
    card: {
      type: Object,
      default: () => {}
    },
    addr: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      // 组件数据
      giftNotice: '',
      isReceive: false,
      address: {},
      order: ''
    }
  },
  watch: {
    addr: {
      handler(newVal, oldVal) {
        if (newVal && newVal.id) {
          this.address = newVal
        }
      },
      deep: true  
    } 
  },
  onShareAppMessage() {
    return {
      title: '送朋友',
      path: `/pkg_user/views/gift/receive?code=${this.card.code}`,
      imageUrl: this.card.image
    }
  },
  methods: {
    // 分享到微信好友
    toShare() {
      // 分享到微信好友
    },
    toOrder() {
      this.$yrouter.push({
        path: "/pages/order/OrderDetails/index",
        query: {
          id: this.order
        }
      });
    },
    toHome() {
      console.log('??');
      uni.switchTab({
        url: '/pages/home/index'
      })
    },
    getReceive(e) {
      uni.showLoading({
        title: '领取中...',
        mask: true
      })
      // 领取礼包
      getGiftCardReceive({
        code: this.card.code,
        addressId: e
      }).then(res => {
        this.$refs.addressDialog.close()
        this.$refs.AddressList.close()
        this.order = res.data.orderId
        this.isReceive = true
      }).finally(() => {
        uni.hideLoading()
      })
    },
    setAddress() {
      getAddressList().then(res => {
        if (res.data.length === 0) {
          this.$refs.addressDialog.open()
        } else {
          this.address = res.data.filter(item => item.isDefault === 1).length === 0 ? res.data[0] : res.data.filter(item => item.isDefault === 1)[0]
          this.$refs.AddressList.open()
        }
      })
    },
    async showTips() {
      // 获取发礼提示
      getGiftCardSendNotice().then(res => {
        this.$refs.giftTips.showTips = true
        this.giftNotice = res.data
      })
      
    },
  }
}
</script>

<style scoped>
.bg-image{
  width: 586rpx;
  height: 704rpx;
  position: absolute;
  top: 0;
}
.tips{
  display: flex;
  align-items: center;
  margin-top: 40rpx;
  position: absolute;
  bottom: 50rpx;
}
.tip-text{
  font-family: Source Han Sans SC;
  font-weight: 500;
  font-size: 28rpx;
  color: #fff;
  opacity: 0.6;
  line-height: 36rpx;
}
.wrap-box{
  width: 296rpx;
  height: 296rpx;
}
.image-wrap{
  width: 296rpx;
  height: 296rpx;
  border: 10rpx solid #FDF0D3;
  border-radius: 30rpx;
  position: absolute;
  top: -60px;
}
.pro-image{
  width: 296rpx;
  height: 296rpx;
  border-radius: 30rpx;
}
.auto-text-color {
  color: #fff;
  font-size: 24rpx;
  opacity: 0.8;
  margin-top: 50rpx;
}
.share-btn{
  width: fit-content;
  border-radius: 100rpx;
  font-size: 24rpx;
  margin-top: 40rpx;
  z-index: 999;
}
.address-btn{
  width: fit-content;
  padding: 20rpx 30rpx;
  border-radius: 100rpx;
  font-size: 32rpx;
  font-weight: bold;
  margin-top: 40rpx;
  z-index: 999;
}
.gift-card-modal {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 586rpx;
    height: 704rpx;
    /* background-color: #C52733; */
    justify-content: center;
    z-index: 999;
    margin: auto;
    border-radius: 16rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
}

.gift-card-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  width: 80%;
  max-width: 300px;
}
</style>