suke-mp/src/pages/common/register/index.vue

<template>
  <view class='content'>
    <image class='bg-image' :src='assetsUrl("bg_register.png")' />

    <image :src='assetsUrl("ic_register_gift_text.png")'
           style='align-self: center;position: relative;width: 356rpx;height: 124rpx;margin-top: 70rpx' />
    <view class='card-view'>
      <view class='mobile-view c-flex-row' style='display: none'>
        <image :src='assetsUrl("ic_register_mobile.png")' />
        <input placeholder='请输入手机号' inputmode='number' maxLength='11' />
      </view>

      <view class='captcha-view c-flex-row' style='display: none'>
        <view class='c-flex-row'>
          <image :src='assetsUrl("ic_register_captcha.png")' />
          <input placeholder='请输入验证码' inputmode='number' maxLength='6' />
        </view>
        <text @click.stop='startCountdown'>{{ countdown }}</text>
      </view>

      <text class='btn_register' style='display: none' @click.stop='register'>注册领券</text>

      <image :src='companyConfigInfo.regqrcode||defaultImage' :show-menu-by-longpress='true' mode='aspectFill'
             style='width: 439rpx;height: 439rpx;align-self: center' />
      <text style='font-size: 26rpx;
      margin-top: 10rpx;
      align-self: center;color: #666666;'>长按扫码注册
      </text>

      <template v-if='couponBean&&couponBean.status==0'>
        <view class='divider' />
        <view class='coupon c-flex-column' @click.stop='goPath("/pages/mine/subs/coupon/index")'>
          <view class='c-flex-row'>
            <text class='coupon-name'>{{ couponBean.title }}</text>
            <image :src='assetsUrl("ic_arrow_right_gray.png")' />
          </view>
          <text class='expired-time'>
            有效期至{{ dayjs(Date.now()).add(couponBean.triggerEndDay, 'day').format('YYYY.MM.DD') }}
          </text>
        </view>
        <view class='divider' />

        <text style='font-size: 28rpx;
      font-weight: bold;
color: #333333;margin-top: 20rpx'>福利详情
        </text>
        <text style='font-size: 28rpx;
color: #333333;margin-top: 14rpx'>1.优惠金额{{ couponBean.reduce }}元\n
          2.满{{ couponBean.threshold }}减{{ couponBean.reduce }}\n
          3.赠送{{ couponBean.publicNum }}张
        </text>
      </template>
      <template v-else>
        <text style='font-size: 28rpx;
      font-weight: bold;
color: #333333;margin-top: 20rpx'>
          微信扫一扫领取会员卡
        </text>
        <text style='font-size: 28rpx;
color: #333333;margin-top: 14rpx'>
          1、及时接受消费小票\n
          2、随时查询消费记录\n
          3、及时接收优惠信息
        </text>
      </template>
    </view>
  </view>
</template>

<script lang='ts' setup>
import { assetsUrl, defaultImage } from '@/utils/assets';
import { useUserStore } from '@/store';
import { goPath } from '@/utils';
import { getRegisterCoupon } from '@/api/user';
import dayjs from 'dayjs';

const userStore = useUserStore();
const { companyConfigInfo } = storeToRefs(userStore);

const countdown = ref('获取验证码');
const couponBean = ref();

onLoad(async (e) => {
  couponBean.value = await getRegisterCoupon();
});

const startCountdown = () => {
  if(countdown.value !== '获取验证码') {
    return;
  }
  let time = 120;
  let interval = setInterval(() => {
    time--;
    countdown.value = `${time}s 重新获取`;
    if(time == 0) {
      clearInterval(interval);
      countdown.value = '获取验证码';
    }
  }, 1000);
};

const register = () => {
};

</script>

<style lang='scss' scoped>
.content {
  position: relative;
  height: 100vh;
}

.bg-image {
  position: fixed;
  height: 100vh;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.card-view {
  background: #FFFFFF;
  border-radius: 10rpx;
  margin: 0 40rpx;
  padding: 50rpx;
  top: 150rpx;
  position: relative;

  .mobile-view {
    border-radius: 10rpx;
    border: 1rpx solid #D8D8D8;
    padding-left: 28rpx;

    image {
      width: 36rpx;
      height: 36rpx;
    }

    input {
      flex: 1;
      height: 80rpx;
      font-size: 30rpx;
      color: #333333;
      margin-left: 26rpx;
    }
  }

  .captcha-view {
    margin-top: 20rpx;

    .c-flex-row {
      border-radius: 10rpx;
      border: 1rpx solid #D8D8D8;
      padding-left: 28rpx;
      flex: 1;

      image {
        width: 33rpx;
        height: 26rpx;
      }

      input {
        height: 80rpx;
        font-size: 30rpx;
        color: #333333;
        margin-left: 26rpx;
      }
    }

    text {
      display: flex;
      height: 80rpx;
      background: #FFD436;
      border-radius: 10rpx;
      margin-left: 12rpx;
      padding: 0 15rpx;
      font-size: 28rpx;
      align-items: center;
      justify-content: center;
      color: #FFFFFF;
    }
  }

  .btn_register {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 90rpx;
    background: #F53636;
    border-radius: 10rpx;
    font-weight: 400;
    font-size: 30rpx;
    color: #FFFFFF;
    margin-top: 46rpx;
  }

  .divider {
    border-bottom-style: dashed;
    border-color: #E98585;
    border-width: 0.2rpx;
    margin-top: 34rpx
  }

  .coupon {
    margin-top: 30rpx;

    .coupon-name {
      display: flex;
      font-size: 36rpx;
      color: #D95554;
      flex: 1;
    }

    image {
      width: 13rpx;
      height: 24rpx;
    }

    .expired-time {
      font-size: 28rpx;
      color: #333333;
      margin-top: 2rpx;
    }
  }
}
</style>