54 lines
1.2 KiB
Vue
54 lines
1.2 KiB
Vue
<template>
|
|
<!-- 模态框 -->
|
|
<view class="cu-modal" :class="isShow?'show':''">
|
|
<view class="cu-dialog bg-white">
|
|
<view class="cu-bar bg-white justify-end solid-bottom">
|
|
<view class="content">手机号验证</view>
|
|
<view class="action" @click="hideModal">
|
|
<text class="cuIcon-close text-red"></text>
|
|
</view>
|
|
</view>
|
|
<view class="padding-xl flex justify-start">
|
|
<input type="number" maxlength="11" class="radius-input flex-twice" v-model="phoneNum">
|
|
<button class="cu-btn bg-main-color shadow-blur flex-sub margin-left-sm">发送验证码</button>
|
|
</view>
|
|
<view class="cu-bar bg-white solid-top">
|
|
<view class="action margin-0 flex-sub text-main-color solid-left" @tap="hideModal" @click="confirm">{{confirmMsg}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'phone-vertify',
|
|
emits: ['confirm'],
|
|
props: {
|
|
confirmMsg: {
|
|
type: String,
|
|
default: '确定'
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
isShow: false,
|
|
phoneNum: ''
|
|
}
|
|
},
|
|
methods: {
|
|
showModal(e) {
|
|
this.isShow = true
|
|
},
|
|
hideModal(e) {
|
|
this.isShow = false
|
|
},
|
|
confirm() {
|
|
this.$emit('confirm', this.phoneNum);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
</style>
|