WX-welfareOfficer/pages/index/index.vue

<template>
  <view class="redPackets">
    <view class="redPackets-box" @tap="getAuthCode()" v-show="!isOpen">
      <view class="top-box">
        <text class="title">{{ info.batch_goods_name }}</text>
        <text class="type">
          {{ info.cash_amount_type_text }}
        </text>
      </view>
      <text class="time">红包有效期截止 {{ info.end_time }}</text>
    </view>

    <view class="open-redPackets-box" v-show="isOpen">
      <view class="open-top-box">
        <view class="open-title">
          <text class="open-tag">￥</text>
          {{ info.receive_price }}
        </view>
        <text class="open-type">
          {{ info.wishing }}
        </text>
      </view>
      <view class="open-notis" v-if="info.receive_status === 5">
        <view class="re"> 领取成功 </view>
        请前往微信【我的 - 服务 - 钱包 - 账单】中查看
      </view>
      <view class="open-notis" v-else>
        <view class="re res"> 已被领取 </view>
      </view>
    </view>
    <noticeBox :notice="notice" />
  </view>
</template>

<script>
import { getInfo, receiveRed, upgrade } from "@/api/index.js"
import noticeBox from "@/components/notice.vue"
import { decode } from "@/utils/base64.js"
export default {
  components: {
    noticeBox
  },
  data() {
    return {
      isOpen: false,
      order_number: "",
      info: {
        batch_goods_name: "现金红包",
        cash_amount_type_text: "固额红包",
        end_time: "2023-06-30 23:59:59",
        receive_price: 0.01,
        receive_status: 0,
        wishing: "恭喜发财"
      },
      auth_code: "",
      notice: null
    }
  },
  async onShow() {
    /* 判断是否升级 */
    const res = await upgrade()
    if (res.data.update) {
      return (this.notice = res.data.msg)
    }

    let option = uni.getEnterOptionsSync().query /*小程序热启用和冷启用取参*/
    /* 直接通过小程序打开，判断是否有 order_number */
    if (option && option.order_number) {
      this.order_number = decode(option.order_number)
    } else {
      const value = uni.getStorageSync("order_number")
      value && (this.order_number = value)
    }
    this.getRedInfo()
  },

  methods: {
    /* 授权 */
    getAuthCode() {
      const _this = this
      uni.login({
        provider: "weixin",
        success(data) {
          _this.auth_code = data.code
          _this.receive()
        }
      })
    },

    //请求详情
    getRedInfo() {
      if (!this.order_number) return
      uni.showLoading({
        mask: true,
        title: "加载中"
      })
      getInfo({
        order_number: this.order_number
      }).then(({ code, data, message }) => {
        if (code == 200) {
          uni.setStorageSync("order_number", this.order_number)
          uni.hideLoading()
          this.info = data
          /*0 未领取 1 2 领取成功 3领取失败 */
          if ([1, 2].includes(data.receive_status)) {
            this.isOpen = true
          }
          if (data.receive_status === 3) {
            uni.showModal({
              title: "温馨提示",
              showCancel: false,
              content: message
            })
          }
        } else {
          uni.showModal({
            title: "温馨提示",
            showCancel: false,
            content: message
          })
        }
      })
    },

    /* 领取红包 */
    receive() {
      if (this.order_number && this.info.receive_status === 0) {
        uni.showLoading({
          mask: true,
          title: "加载中"
        })
        receiveRed({
          order_number: this.order_number,
          auth_code: this.auth_code
        }).then(({ code, message }) => {
          uni.hideLoading()
          if (code === 200) {
            this.info.receive_status = 5
            this.isOpen = true
            uni.showModal({
              title: "温馨提示",
              showCancel: false,
              content: message
            })
          } else {
            uni.showModal({
              title: "温馨提示",
              showCancel: false,
              content: message
            })
          }
        })
      } else {
        this.isOpen = true
      }
    }
  }
}
</script>

<style>
.redPackets {
  height: 100%;
  width: 100%;
  padding: 50rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/redPacktes/redPackets_bg.png")
    no-repeat;
  background-size: 100% 100%;
}

.res {
  font-size: 40rpx !important;
}

.redPackets-box {
  height: 740rpx;
  width: 532rpx;
  background-image: url("https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/redPacktes/notOpen.png");
  background-repeat: no-repeat;
  background-size: contain;
  padding-top: 190rpx;
  padding-bottom: 50rpx;
  margin-top: -120rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  /* border: 1rpx solid; */
}

.top-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title {
  font-size: 46rpx;
  color: rgb(254, 244, 217);
  display: inline-block;
  font-weight: bold;
  text-shadow: 0.1rpx 0.1rpx rgb(255, 249, 232);
}

.type {
  display: block;
  padding: 10rpx 46rpx;
  border: 1rpx solid rgb(254, 244, 217);
  transform: rotateZ(360deg);
  border-radius: 50rpx;
  font-size: 22rpx;
  margin-top: 24rpx;
  color: rgb(254, 244, 217);
}

.time {
  display: inline-block;
  font-size: 22rpx;
  color: rgb(249, 181, 134);
}

/*  */
.open-redPackets-box {
  height: 800rpx;
  width: 580rpx;
  background-image: url("https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/redPacktes/open.png");
  background-repeat: no-repeat;
  background-size: contain;
  padding-top: 165rpx;
  padding-bottom: 110rpx;
  margin-top: -75rpx;
  margin-left: -46rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  /* border: 1rpx solid; */
}

.open-top-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 35rpx;
}

.open-title {
  font-size: 90rpx;
  color: rgb(245, 72, 54);
  display: inline-block;
  font-weight: bold;
  text-shadow: 0.1rpx 0.1rpx rgb(255, 249, 232);
}

.open-tag {
  font-size: 30rpx;
}

.open-type {
  display: inline-block;
  font-size: 20rpx;
  color: rgb(245, 72, 54);
  width: 400rpx;
  text-align: center;
  margin-top: 10rpx;
  /* 这里是超出几行省略 */
}

.open-time {
  display: inline-block;
  font-size: 22rpx;
  color: rgb(249, 181, 134);
}

.open-notis {
  color: rgb(254, 244, 217);
  font-size: 22rpx;
  margin-left: 35rpx;
  margin-bottom: 70rpx;
}

.re {
  text-align: center;
  font-size: 26rpx;
  margin-bottom: 20rpx;
}
</style>