zhishifufei_uniapp/pages/special/exchange.vue

<template>
  
  <BaseContainer class="exchange-code">
    <NavBar title="专题兑换" />
    <view class="exchange-code-form">
      <input
        v-model.trim="code"
        type="text"
        class="form-code"
        maxlength="6"
        placeholder="请输入兑换码"
      />
      <view><text>温馨提示：</text>每个兑换码只能兑换一次哦~</view>
      <view
        class="submit-btn flex flex-center"
        :class="{ disabled: !code }"
        @click="exchange"
        >立即兑换</view
      >
    </view>
    <view :class="{ mask: isSuccess }"></view>
    <view v-show="isSuccess" class="dialog">
      <image :src="getImgPath('/wap/first/zsff/images/exchange3.png')" alt="" />
      <view>兑换成功</view>
      <view>您的课程已兑换成功，快去学习吧！</view>
      <navigator
        :url="
          (is_light
            ? '/pages/special/single_details'
            : '/pages/special/details') +
          '?id=' +
          special_id
        "
        >立即查看</navigator
      >
    </view>
  </BaseContainer>
</template>

<script>
import { exchangeSpecial } from "@/api/special";
export default {
  data() {
    return {
      special_id: "",
      code: "",
      isSuccess: false,
      loginShow: false,
      isWechat: false,
      is_light: 0,
    };
  },
  onLoad({ special_id }) {
    this.special_id = special_id;
  },
  methods: {
    exchange() {
      if (!/^\d{6}$/.test(this.code)) {
        return this.$util.showMsg("请输入正确的兑换码");
      }

      this.$util.checkLogin(async () => {
        uni.showLoading({ mask: true });

        try {
          const { data } = await exchangeSpecial(this.special_id, this.code);
          uni.hideLoading();
          this.is_light = data.is_light;
          this.isSuccess = true;
        } catch (err) {
          uni.hideLoading();
          this.$util.showMsg(err.msg);
        }
      });
    },
  },
};
</script>

<style lang="scss">
page {
  background: url(getAssetsPath("/wap/first/zsff/images/exchange1.png"))
    center/cover no-repeat;
  overflow: hidden;
}
</style>

<style scoped lang="scss">
/* 兑换码 */
.exchange-code .exchange-code-form {
  width: 746rpx;
  height: 994rpx;
  padding-top: 406rpx;
  margin: 82rpx auto;

  box-sizing: border-box;
  background: url(getAssetsPath("/wap/first/zsff/images/exchange2.png")) center
    top/100% 100% no-repeat;
}

.exchange-code .exchange-code-form .form-code {
  display: block;
  width: 580rpx;
  height: 130rpx;
  border-radius: 20rpx;
  margin: 0 auto;
  background-color: #f5f6fd;
  font-size: 48rpx;
  text-align: center;
  color: #282828;
}

.exchange-code .exchange-code-form view {
  margin-top: 139rpx;
  font-size: 30rpx;
  text-align: center;
  color: #868999;
}

.exchange-code .exchange-code-form text {
  font-weight: bold;
}

.exchange-code .exchange-code-form .submit-btn {
  width: 480rpx;
  height: 96rpx;
  border-radius: 48rpx;
  margin: 50rpx auto 0;
  background: linear-gradient(180deg, #409dff 0%, #1e85fb 100%);

  box-shadow: 0 8rpx 20rpx rgba(0, 60, 230, 0.24);
  font-weight: bold;
  font-size: 30rpx;
  color: #ffffff;

  &.disabled {
    opacity: 0.5;
  }
}

.exchange-code .dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 56;
  width: 600rpx;
  border-radius: 36rpx;
  background-color: #ffffff;

  transform: translate(-50%, -50%);
  font-size: 32rpx;
  text-align: center;
  color: #b8b8b8;
}

.exchange-code .dialog image {
  display: block;
  width: 410rpx;
  height: 410rpx;
  margin: 24rpx auto 26rpx;
}

.exchange-code .dialog view:nth-of-type(1) {
  margin-bottom: 18rpx;
  font-weight: bold;
  font-size: 42rpx;
  color: #282828;
}

.exchange-code .dialog navigator {
  display: block;
  width: 418rpx;
  height: 96rpx;
  border-radius: 48rpx;
  margin: 50rpx auto 52rpx;
  background: linear-gradient(180deg, #409dff 0%, #1e85fb 100%);

  box-shadow: 0 8rpx 20rpx rgba(0, 60, 230, 0.24);
  font-size: 30rpx;
  line-height: 96rpx;
  text-align: center;
  color: #ffffff;
}
</style>