java-mall-app/components/coupon/coupon.vue

<template>
  <view>
    <!-- 新手大礼包 -->
    <view
      :class="['msk', !user_is_new || isClosed ? 'hide' : '']"
      @tap="cancel"
    >
      <view
        class="msk_box"
        url="../receivecontent/receivecontent"
        @tap="innertouch"
      >
        <image
          src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/Package.png"
          style="width: 100%"
        ></image>
        <view class="msk_box_info" style="right: 16%; top: 40%"
          ><text>{{ __("￥") }}</text
          ><label>{{ CouponAmount }}</label>
        </view>
        <view class="btn_receivenow" @tap="receivenow"></view>
        <view class="btn_cancel" @tap="cancel">✕</view>
      </view>
    </view>

    <view class="msk1" @tap="cancelsuccess" v-if="isShowSuccessBox">
      <view class="m-coupon-box" @tap="innertouch">
        <view
          :class="mskType == 1 ? 'm-coupon-box-top' : 'm-coupon-box-top2'"
        ></view>
        <view class="m-coupon-box-content">
          <scroll-view scroll-y="true" class="m-coupon-box-list">
            <view
              class="m-coupon-box-item"
              v-for="(item, index) in coupon_rows"
              :key="index"
            >
              <view class="m-coupon-box-item-left"
                ><label style="font-size: 24rpx; margin-top: 14rpx">{{
                  __("￥")
                }}</label
                >{{ item.voucher_price || item.activity_rule.voucher_price }}
              </view>
              <view class="m-coupon-box-item-right"
                ><label>{{
                  sprintf(
                    __("有效日期至：%s"),
                    item.voucher_end_date || item.activity_endtime
                  )
                }}</label>
                <text>{{ item.activity_name }}</text>
              </view>
            </view>
          </scroll-view>
        </view>
        <view class="m-coupon-box-bottom"></view>
        <view class="close_msk" @tap="cancelsuccess">
          <image
            style="width: 50rpx; height: 50rpx"
            src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/img/delete.png"
          ></image>
        </view>
      </view>
    </view>
  </view>
</template>



<script>
import { mapState, mapMutations } from "vuex";

import $ from "../../helpers/util";

export default {
  props: {
    Coupons: {
      type: Object,
      default: {},
    },
    user_is_new: {
      type: Number,
      default: 0,
    },
    CouponAmount: {
      type: Number,
      default: 0.0,
    },
    mskType: {
      type: Number,
      default: 1,
    },
  },
  computed: mapState([
    "Config",
    "StateCode",
    "notice",
    "plantformInfo",
    "shopInfo",
    "userInfo",
    "hasLogin",
    "__",
  ]),
  data() {
    return {
      isShowSuccessBox: false,
      isClosed: false,
      coupon_rows: [],
    };
  },
  mounted() {},
  methods: {
    ...mapMutations([
      "login",
      "logout",
      "getPlantformInfo",
      "forceUserInfo",
      "getUserInfo",
      "showCartNum",
    ]),
    receivenow: function () {
      this.userReceiveCoupon();
    },
    cancel: function () {
      this.setData({ isClosed: true });
    },
    cancelsuccess: function () {
      this.setData({ isShowSuccessBox: false });
    },
    innertouch: function () {},
    userReceiveCoupon: function () {
      let that = this;
      var params = {
        CouponIds: "",
        user_is_new: this.userInfo.user_is_new,
      };

      this.forceUserInfo((user) => {
        if (user) {
          $.request({
            url: this.Config.URL.user.receive_new_gift,
            data: params,
            success: function (data, status, msg, code) {
              if (200 == status) {
                $.alert(that.__("领取成功!"));

                that.login({ user_is_new: 0 });

                that.setData({
                  isShowSuccessBox: true,
                  coupon_rows: data.items,
                });
              } else {
                $.alert(msg);
              }
            },
          });
        }
      });
    },
  },
};
</script>

<style scoped>
.video {
  width: 750rpx;
}

.top {
  position: absolute;
  top: 0;
  background-image: linear-gradient(
    to top,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0.7)
  );
  width: 750rpx;
  height: 300rpx;
}
.bottom {
  position: absolute;
  bottom: 0;
  background-image: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.7),
    rgba(0, 0, 0, 0)
  );
  width: 750rpx;
  height: 300rpx;
}
.progressBar {
  border-radius: 2rpx;
  height: 4rpx;
  background-color: #ffffff;
  z-index: 999999;
  position: absolute;
  bottom: 40rpx;
}
</style>