|
|
@@ -1,40 +1,33 @@
|
|
|
<template>
|
|
|
- <view class="">
|
|
|
- <u-popup v-model="show" mode="center" width="80%" border-radius="15" :closeable="true">
|
|
|
- <view class="sms-alert-container">
|
|
|
- <view class="title">短信验证</view>
|
|
|
- <view class="info-msg">验证码已发送至{{phoneInfo}}</view>
|
|
|
- <view class="input-box">
|
|
|
- <u-input class="input-content" type="number" maxlength="6" placeholder="请输入验证码" v-model="code" />
|
|
|
- <view class="code-button">
|
|
|
- <view v-if="sending==true">
|
|
|
- <u-loading mode="circle"></u-loading>
|
|
|
- </view>
|
|
|
- <view v-else-if="seconds > 0"><span class="text-red">{{seconds+'s '}} </span>可重发</view>
|
|
|
- <view v-else>
|
|
|
- <u-button @click="$u.debounce(sendMessage, 500)" plain size="mini">重新发送</u-button>
|
|
|
- </view>
|
|
|
+ <u-popup v-model="show" mode="center" width="80%" border-radius="15" :closeable="true">
|
|
|
+ <view class="sms-alert-container">
|
|
|
+ <view class="title">短信验证</view>
|
|
|
+ <view class="info-msg">验证码已发送至{{phoneInfo}}</view>
|
|
|
+ <view class="input-box">
|
|
|
+ <u-input class="input-content" type="number" maxlength="6" placeholder="请输入验证码" v-model="code"/>
|
|
|
+ <view class="code-button">
|
|
|
+ <view v-if="sending==true">
|
|
|
+ <u-loading mode="circle"></u-loading>
|
|
|
</view>
|
|
|
+ <view v-else-if="seconds > 0"><span class="text-red">{{seconds+'s '}} </span>可重发</view>
|
|
|
+ <view v-else><u-button @click="$u.debounce(sendMessage, 500)" plain size="mini">重新发送</u-button></view>
|
|
|
</view>
|
|
|
- <u-button @click="$u.debounce(exchange, 500)" :custom-style="customStyle" shape="circle">确认</u-button>
|
|
|
</view>
|
|
|
- </u-popup>
|
|
|
- <loading ref="loading" type="3"/>
|
|
|
- <toast ref="toast" ></toast>
|
|
|
- </view>
|
|
|
+ <u-button @click="$u.debounce(validateCode, 500)" :custom-style="customStyle" shape="circle" >确认</u-button>
|
|
|
+ </view>
|
|
|
+ </u-popup>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
- name: "smsAlert",
|
|
|
+ name:"smsAlert",
|
|
|
data() {
|
|
|
return {
|
|
|
show: false,
|
|
|
sending: true,
|
|
|
- phone: '19124812874',
|
|
|
+ phone: '13126058204',
|
|
|
code: '',
|
|
|
seconds: -1,
|
|
|
- smsParams: {},
|
|
|
customStyle: {
|
|
|
color: 'white',
|
|
|
background: "#E72226",
|
|
|
@@ -42,92 +35,70 @@
|
|
|
}
|
|
|
};
|
|
|
},
|
|
|
- computed: {
|
|
|
- phoneInfo() {
|
|
|
- return this.phone.substr(0, 4) + "****" + this.phone.substr(7, this.phone.length);
|
|
|
+ computed:{
|
|
|
+ phoneInfo(){
|
|
|
+ return this.phone.substr(0,4)+"****"+this.phone.substr(7,this.phone.length);
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
- async showSmsAndSend(params) {
|
|
|
- this.$refs.loading.showLoading()
|
|
|
- this.smsParams = params
|
|
|
- let phone = params.mobile
|
|
|
- if (!this.$u.test.mobile(phone)) {
|
|
|
+ async showSmsAndSend(phone){
|
|
|
+ if(this.$u.test.mobile(phone)){
|
|
|
uni.showToast({
|
|
|
- title: '手机号码格式错误',
|
|
|
- icon: 'none'
|
|
|
+ title: '手机号码格式错误',
|
|
|
+ icon: 'none'
|
|
|
});
|
|
|
return;
|
|
|
}
|
|
|
this.phone = phone;
|
|
|
- await this.sendMessage();
|
|
|
+ await sendMessage();
|
|
|
this.show = true;
|
|
|
- this.$refs.loading.hide()
|
|
|
},
|
|
|
- hideSms() {
|
|
|
+ hideSms(){
|
|
|
this.show = false;
|
|
|
},
|
|
|
- async sendMessage() {
|
|
|
+ async sendMessage(){
|
|
|
this.sending = true;
|
|
|
- let res = await this.$api.order.sendCmccSms(this.smsParams)
|
|
|
- if (!res.data.success) {
|
|
|
- this.$refs.toast.error(res.data.msg)
|
|
|
- this.hideSms()
|
|
|
- }
|
|
|
//发送验证码
|
|
|
- this.sending = false;
|
|
|
+ this.sending= false;
|
|
|
},
|
|
|
- exchange() {
|
|
|
- if (this.$isEmpty(this.code)) {
|
|
|
- this.$u.toast('请输入验证码')
|
|
|
- return
|
|
|
- }
|
|
|
- let params=this.$u.deepClone(this.smsParams)
|
|
|
- params.smsCode=this.code
|
|
|
- params.mobile=this.phone
|
|
|
- this.$emit("exchange", params)
|
|
|
+ validateCode(){
|
|
|
+ this.$emit("validateResult",{result: true})
|
|
|
},
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- .sms-alert-container {
|
|
|
+ .sms-alert-container{
|
|
|
padding: 50rpx;
|
|
|
-
|
|
|
- .title {
|
|
|
+ .title{
|
|
|
width: 100%;
|
|
|
text-align: center;
|
|
|
- padding: 0rpx 10rpx 50rpx 10rpx;
|
|
|
+ padding: 0rpx 10rpx 50rpx 10rpx ;
|
|
|
font-weight: 500;
|
|
|
color: #353535;
|
|
|
letter-spacing: 2rpx;
|
|
|
font-size: 30rpx;
|
|
|
}
|
|
|
-
|
|
|
- .info-msg {
|
|
|
+ .info-msg{
|
|
|
padding: 5rpx 5rpx 20rpx 5rpx;
|
|
|
color: #353535;
|
|
|
}
|
|
|
-
|
|
|
- .input-box {
|
|
|
+ .input-box{
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: left;
|
|
|
border: 1rpx solid #DDDDDD;
|
|
|
border-radius: 10rpx;
|
|
|
margin: 0 0 50rpx 0;
|
|
|
- padding: 5rpx 5rpx 5rpx 30rpx;
|
|
|
+ padding: 5rpx 5rpx 5rpx 30rpx;
|
|
|
}
|
|
|
-
|
|
|
- .input-content {
|
|
|
+ .input-content{
|
|
|
width: 66%;
|
|
|
}
|
|
|
-
|
|
|
- .code-button {
|
|
|
+ .code-button{
|
|
|
width: 34%;
|
|
|
- border-left: 1rpx solid #DDDDDD;
|
|
|
- text-align: center;
|
|
|
+ border-left: 1rpx solid #DDDDDD;text-align: center;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
lianghanqiang