WPF MVVM下做發送短信小按鈕

　　最近做一個項目，因為涉及到注冊，因此需要發送短信，一般發送短信都有一個倒計時的小按鈕，因此，就做了一個，在此做個記錄。

一、發送消息

　　沒有調用公司的短信平台，只是模擬前台生成一串數字，將此串數字輸出一下。

　　在這個部分寫了兩個類文件：一個是生成隨機數，一個是模擬發送此數字的。

　　1、因為生成幾位隨機數，是必須要到項目上線之前才能定的，因此，寫了一個帶參數的函數，如下

 

    /// <summary>
    /// 生成隨機驗證碼
    /// </summary>
    public static class RandomCode
    {
        /// <summary>
        /// 返回一個N位驗證碼
        /// </summary>
        /// <param name="N">位數</param>
        /// <returns></returns>
        public static string RandomCodeCommand(int N)
        {
            string code = "";
            Random random = new Random();
            for (int i = 0; i < N; i++)
            {
                code += random.Next(9);
            }
            return code;
        }
    }

 

　　2、模擬發送此串數字。

　　這個類里面用了兩個Timer函數，一個是用作Button的倒數顯示的，另一個是用作保存這個驗證碼時長的。

　　在記錄驗證碼的同時，還需要記錄發送驗證碼的手機號，以防止，用戶用第一個手機號點擊了發送驗證碼后，把手機號部分修改為其他的手機號。

 

public class SendRandomCode : ViewModelBase
    {
        private int _interval;//記錄倒計時長
        private string idCode;//在規定時間內保存驗證碼
        private int idCodeTime;//設置驗證碼的有效時間（秒）
        private int idCodeNum = 6;//設置驗證碼的位數

        public void GetCode(string phoneNum)
        {
            //獲取驗證碼
            timerSend = new Timer(1000);
            timerSend.AutoReset = true;
            timerSend.Elapsed += Timer_Elapsed;
            _interval = SecondNum;
            timerSend.Start();

            //在驗證碼有效期內，再次請求驗證碼，需要先關閉上一次的
            if (timerTime != null)
            {
                timerTime.Close();
                timerTime.Dispose();
            }
            //驗證碼的有效期
            timerTime = new Timer(1000);
            timerTime.AutoReset = true;
            timerTime.Elapsed += TimerTime_Elapsed;
            timerTime.Start();
            idCodeTime = SaveTime;
            IdCode = RandomCode.RandomCodeCommand(idCodeNum);
            PhoneNum = phoneNum;
        }

        #region 獲取驗證碼倒計時
        Timer timerSend;
        Timer timerTime;
        private void Timer_Elapsed(object sender, ElapsedEventArgs e)
        {
            BtnIsEnable = false;
            BtnContent = "(" + (_interval--) + ")秒后再次獲取驗證碼";

            if (_interval <= -1)
            {
                BtnIsEnable = true;
                BtnContent = "獲取驗證碼";
                timerSend.Stop();
                timerSend.Dispose();
            }
            //throw new NotImplementedException();
        }
        private void TimerTime_Elapsed(object sender, ElapsedEventArgs e)
        {
            idCodeTime--;
            if (idCodeTime <= 0)
            {
                IdCode = "";
                timerTime.Stop();
                timerTime.Dispose();
            }
            Console.WriteLine(IdCode);
            //throw new NotImplementedException();
        }
        #endregion

        #region 字段
        //*************************************************************************************************//上線時需要修改
        private int secondNum = 30;//設置倒計時長
        private int saveTime = 60;//設置保存驗證碼時長
                                  //*************************************************************************************************//
        private string btnContent = "獲取驗證碼";//設置獲取驗證碼按鈕顯示的名稱
        private bool btnIsEnable = true;//設置獲取驗證碼按鈕是否可用

        private string phoneNum;//記錄是否是發送驗證碼的手機號
        public int SecondNum
        {
            get
            {
                return secondNum;
            }

            set
            {
                secondNum = value;
            }
        }

        public int SaveTime
        {
            get
            {
                return saveTime;
            }

            set
            {
                saveTime = value;
            }
        }

        public string BtnContent
        {
            get
            {
                return btnContent;
            }

            set
            {
                btnContent = value;
                RaisePropertyChanged("BtnContent");
            }
        }

        public bool BtnIsEnable
        {
            get
            {
                return btnIsEnable;
            }

            set
            {
                btnIsEnable = value;
                RaisePropertyChanged("BtnIsEnable");
            }
        }

        public string IdCode
        {
            get
            {
                return idCode;
            }

            set
            {
                idCode = value;
                RaisePropertyChanged("IdCode");
            }
        }

        public string PhoneNum
        {
            get
            {
                return phoneNum;
            }

            set
            {
                phoneNum = value;
                RaisePropertyChanged("PhoneNum");
            }
        }
        #endregion
    }

 

二、XAML頁面代碼 

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <StackPanel Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Horizontal">
            <Label Content="手機號"/>
            <TextBox Text="{Binding PhoneNum}" Height="20" Width="100"/>
            <Button Content="{Binding Src.BtnContent}" IsEnabled="{Binding Src.BtnIsEnable}" Command="{Binding SendCode}" Height="20" Width="120"/>
        </StackPanel>
        <StackPanel Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Horizontal">
            <Label Content="驗證碼"/>
            <TextBox Text="{Binding IdentifyCode}" Height="20" Width="100"/>
            <Button Content="提交" Command="{Binding Submit}" Height="20" Width="120"/>
        </StackPanel>
    </Grid>

三、VM頁面代碼　　

　　VM頁面沒有什么特別的，就是聲明了一些字段，

　　特別注意的是，由於前台的XAML頁面上的發送短信按鈕是需要倒計時的，因此Button的Content和IsEnable需要綁定到SendRandomCode這個類上，所以需要在VM下聲明一下這個類

 

public class BingVM: ViewModelBase
    {
        #region 界面字段
        private string phoneNum;//手機號
        private string identifyCode;//驗證碼
        public string PhoneNum
        {
            get
            {
                return phoneNum;
            }

            set
            {
                phoneNum = value;
                RaisePropertyChanged("PhoneNum");
            }
        }

        public string IdentifyCode
        {
            get
            {
                return identifyCode;
            }

            set
            {
                identifyCode = value;
                RaisePropertyChanged("IdentifyCode");
            }
        }
        #endregion

        #region 為獲取驗證碼按鈕設置content和isEnable用的
        SendRandomCode src = new SendRandomCode();
        public SendRandomCode Src
        {
            get { return src; }
            set
            {
                src = value;
            }
        }
        #endregion

        private RelayCommand sendCode;//獲取驗證碼

        public RelayCommand SendCode
        {
            get
            {
                return sendCode ?? (sendCode = new RelayCommand(
                    () =>
                    {
                        if (!string.IsNullOrEmpty(PhoneNum))
                        {
                            src.GetCode(PhoneNum);
                        }
                        else
                        {
                            MessageBox.Show("手機號不能為空！");
                        }

                    }));
            }
        }
        private RelayCommand submit;

        public RelayCommand Submit
        {
            get
            {
                return submit ?? (submit = new RelayCommand(
                    () =>
                    {
                        if (IdentifyCode == src.IdCode && PhoneNum == src.PhoneNum)
                        {
                            MessageBox.Show("驗證成功");
                        }
                        else
                        {
                            MessageBox.Show("驗證失敗");
                        }
                    }));
            }
        }

    }

 

四、效果展示

 

 

 

 

 

 

 

 

 

 

上面是成功的效果圖

驗證失敗的情況如下：

1、如果在發送驗證碼的過程中，把手機號修改了，填入原有的驗證碼

2、如果輸入的驗證碼不是程序輸出的驗證碼

3、時間超過了驗證碼的保存時間

 

=============================================================================

BUG修復：

剛才在測試的過程中發現了一個問題，由於我們做的主程序是調用模塊的DLL文件生成磁貼的，而主程序的返回按鈕，不會關閉掉當前磁貼的所有線程，導致當返回再進入此磁貼時，再次點擊發送按鈕，則會再次出現一個驗證碼，解決方式很簡單：修改SendRandomCode代碼，在Timer timerTime;前加static，是其成為靜態的。這樣再次點擊時，就是知道線程已存在，先關閉再發送。