yitisheng-mini-app/pages/zyb/vip/cardamom.vue

<!--卡密激活 页面-->
<script>
import StaticConstant from "@/common/StaticConstant";
import ApiConstant from "@/common/ApiConstant";
import Request from '@/common/request'
import user from "@/pages/zyb/user/index.vue";
let request = new Request()
export default {
  name: "cardamom",
  computed: {
    StaticConstant() {
      return StaticConstant
    }
  },
  data() {
    return {
      userInputCardNum: '', // 卡账号
    }
  },
  methods: {
    bankcardInput(e) {
      setTimeout(() => {
        let card = e.detail.value;
        console.log(card.length)
        //输入时每四位一个"-"
        card = card.replace(/\s/g, '').replace(/[^\d]/g, '').replace(/(\d{4})(?=\d)/g, '$1-');
        this.userInputCardNum = card
        console.log("有间隔", this.userInputCardNum);
      },0)
    },
    /*兑换按钮事件*/
    cardActivation(){
      let cardNum = this.userInputCardNum.replace(/-/g, "");
      cardNum
      console.log(cardNum)
      request.post(ApiConstant.VIP.cardActivation, {
        card: cardNum
      }).then(r => {
        console.log(r)
        if (r.success) {
          /*更新VIP状态 start*/
          let userInfo=uni.getStorageSync('userInfo')
          userInfo.vipFlag = true
          uni.setStorageSync('userInfo',userInfo)
          /*更新VIP状态 end.*/
          setTimeout(function () {
            uni.showToast({title: r.message, icon: "none"});
            setTimeout(function () {
              //回到首页
              uni.switchTab({
                url: '/pages/zyb/home'
              });
            }, 1500)
          }, 1000)

        }else{
          uni.showToast({title: r.message, icon: "none"});
          this.userInputCardNum = ''
        }
      }).catch(err => {
      }).finally(() => {
      });
    }
  }
}
</script>

<template>
  <view class="card radius8">
    <view class="card-label">卡密激活码</view>
    <view class="card-body">
      <input class="input radius8" type="number" placeholder="请输入卡密激活码" v-model="userInputCardNum"
             maxlength="19" @input='bankcardInput'/>
      <button type="primary" style="margin-top: 20rpx" class="radius8" @click="cardActivation" :disabled="userInputCardNum.length!==19">兑换
      </button>
    </view>
  </view>
  <view class="card radius8">
    <view class="card-label">使用须知</view>
    <view class="card-body">
      <view class="text-body">
        <text class="text-item">-适用范围:艺术类文理科考生(自主招生暂不适用)。</text>
        <text class="text-item">
          -使用期限:自购买起，截止到2024-8-31日有效，分数修改次数:每届服务期内高考分数放榜前每日可修改5次，放榜后仅可修改1次。
        </text>
        <text class="text-item">-系统数据来源于{{ StaticConstant.bm }}部门，由合作网站提供。</text>
        <text class="text-item">
          -部分年份数据如果为空可能是当年不在查询地招生。系统数据不包含高考加分，如果录取数据与院校公布数据不一致，请以高校正式公布的数据为准。
        </text>
        <text class="text-item">
          -由于高考填报志愿是一个动态变化的过程，本系统查询的历年高校录取数据仅作为填报志愿参考，请综合各种信息进行报考，勿仅以此填报志愿。
        </text>
        <text class="text-item">-本卡为电子卡，不记名，不挂失，一经出售，概不退换!</text>
        <text class="text-item">-最终解释权归本平台所有。</text>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
/*卡片 start*/
.card {
  background-color: white;
  margin: 30rpx 30rpx 20rpx 30rpx;
}

.card .card-label {
  font-size: 33rpx;
  height: 60rpx;
  line-height: 60rpx;
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #f4f5f7;
}

.card .card-body {
  padding: 30rpx 30rpx;
}

/*卡片 end*/
.card .card-body .input {
  padding: 20rpx;
  line-height: 100rpx;
  border: 1rpx solid #c1c4cc;
}


/*兑换按钮 start*/
.ktBtn {
  border: 1rpx solid #3d76fd;
  background-color: #3d76fd !important;
  color: white;
  font-size: 35rpx;
  height: 80rpx;
  text-align: center;
  line-height: 80rpx;
  transition: 0.1s;
  margin: 20rpx 0;
  cursor: pointer;
}

.ktBtn-active {
  border: 1rpx solid #3d76fd;
  background-color: #3d76fd;
}

/*.ktBtn:active {
  border: none;
  background-color: #f8f8f8;
  color: white;
}*/
/*兑换按钮 end*/

/*使用须知*/
.text-body {
  margin-top: 30rpx;
}

.text-body .text-item {
  display: flex;
  justify-items: left;
  font-size: 30rpx;
  color: #606266;
  line-height: 45rpx;
}
</style>