heshui_shop_frontend/pages/pay/exchange.vue

<template>
   <s-layout title="积分转让" :bgStyle="{ color: '#fff' }">
    <view class="score">
        <uni-forms
            ref="smsScoreRef"
            v-model="state.model"
            :rules="state.rules"
            validateTrigger="bind"
            labelWidth="200"
            border="true"
            labelAlign="center">
        <uni-forms-item label="当前积分" labelAlign="left">
            <uni-easyinput
                v-model="state.amount"
                :inputBorder="false"
                type="number"
                disabled
                class="uni-easyinput">
                </uni-easyinput>
        </uni-forms-item>
        <uni-forms-item name="exchange_amount" label="转让积分" labelAlign="left">
            <uni-easyinput
            placeholder="请输入转让积分"
            v-model="state.model.exchange_amount"
            :inputBorder="false"
            type="number"
            class="uni-easyinput">
            </uni-easyinput>
        </uni-forms-item>
        <uni-forms-item name="mobile" label="接收手机号" labelAlign="left">
            <uni-easyinput
            placeholder="请输入接收手机号"
            v-model="state.model.mobile"
            :inputBorder="false"
            type="number"
            maxlength="11"
            class="uni-easyinput">
           </uni-easyinput>
        </uni-forms-item>
        <uni-forms-item name="mobile" label="手机号校验" labelAlign="left">
            <uni-easyinput
                v-model="state.echangeMobile"
                :inputBorder="false"
                type="number"
                disabled
                class="uni-easyinput">
                </uni-easyinput>
        </uni-forms-item>
        <uni-forms-item name="code" label="短信验证码" labelAlign="left">
            <uni-easyinput
                placeholder="请输入短信验证码"
                v-model="state.model.code"
                :inputBorder="false"
                type="number">
                <template v-slot:right>
                    <button
                        class="ss-reset-button code-btn"
                        :disabled="state.isMobileEnd"
                        :class="{ 'code-btn-end': state.isMobileEnd }"
                        @tap="getSmsCode('smsScore', state.mobile)">
                        {{ getSmsTimer('smsScore') }}
                    </button>
                </template>
            </uni-easyinput>
        </uni-forms-item>
        </uni-forms>
        <view class="divide-line"></view>
    </view>
    <su-fixed bottom placeholder>
      <view class="ss-flex ss-row-between ss-p-x-30 ss-p-y-10 bg-white" style="height:180rpx;">
        <button class="submit-btn ss-reset-button ui-BG-Main" @tap="smsLoginSubmit">
          确认转让
        </button>
      </view>
    </su-fixed>
  </s-layout>
</template>

<script setup>
  import { ref, reactive, unref } from 'vue';
  import sheep from '@/sheep';
  import { code, mobile } from '@/sheep/validate/form';
  import { getSmsCode, getSmsTimer } from '@/sheep/hooks/useModal';
  import { onLoad } from '@dcloudio/uni-app';

  const smsScoreRef = ref(null);

  const props = defineProps({
  });

  // 数据
  const state = reactive({
    isMobileEnd: false, // 手机号输入完毕
    codeText: '获取验证码',
    amount: '', // 当前积分
    mobile: '',
    echangeMobile: '',
    model: {
      type: 'score',
      exchange_amount: '', // 转让积分
      code: '', // 短信验证码
    },
    rules: {
      code,
      mobile,
    },
  });

  // 2.短信登录
  async function smsLoginSubmit() {
    const validate = await unref(smsScoreRef)
      .validate()
      .catch((error) => {
        console.log('error: ', error);
      });
    if (!validate) return;
    const params = JSON.parse(JSON.stringify({ ...state.model, exchange_phone: state.model.mobile }));
    delete params.mobile;
    const { code } = await sheep.$api.trade.exchange(params);
    if (code === 1) {
      sheep.$router.back();
    }
  }

  onLoad((options) => {
    const { amount, mobile } = options;
    state.mobile = mobile;
    state.echangeMobile = mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
    state.amount = amount;
  });  
</script>

<style lang="scss" scoped>
  .score {
    padding: 54rpx 52rpx;
  }
  :deep() {
    .uni-forms-item__label .label-text {
      font-size: 26rpx !important;
      color: #000000 !important;
      line-height: normal !important;
    }
    .uni-easyinput__content-input {
      font-size: 26rpx !important;
      color: #333 !important;
      line-height: normal !important;
      padding-left: 0 !important;
      text-align: right;
      .uni-easyinput__placeholder-class {
        font-size: 26rpx;
        text-align: right;
      }
    }
    .uni-easyinput__content.is-disabled {
        background: #fff !important;
        font-weight: bold;
        font-size: 30rpx;
        input {
            color: var(--ui-BG-Main) !important;
        }
    }
    .uni-error-message {
        text-align: right;
    }
  }

  .code-btn {
    width: 160rpx;
    height: 26rpx;
    line-height: normal;
    border-radius: 0;
    font-size: 26rpx;
    font-weight: 400;
    color: var(--ui-BG-Main);
    font-weight: 400;
    border-left: 2rpx solid #898989;
    margin-left: 10rpx;
   }

    .submit-btn {
        width: 513rpx;
        height: 80rpx;
        border-radius: 40rpx;
        background: var(--ui-BG-Main) !important;
        font-weight: 400;
        font-size: 26rpx;
        color: #FFFFFF;
        margin: 0 auto;
        box-shadow: none !important;
   }
   .divide-line {
        height: 1rpx;
        background: #eee;
   }
</style>