cansnow
153 lines
3.4 KiB
Vue
153 lines
3.4 KiB
Vue
<template>
|
|
<view>
|
|
<u-popup ref="popup" :closeOnClickOverlay="closeOnClickOverlay" mode="center" bgColor="none">
|
|
<view :class="['n-ps-all-' + padding, 'n-bg-inverse', 'n-radius-base']" :style="customStyle">
|
|
<view class="n-flex-column n-align-center">
|
|
<text class="n-weight-7 n-color-text" :style="{fontSize:'34rpx'}">{{title}}</text>
|
|
<text class="n-size-ss n-ms-top-s n-color-third" v-if="label">{{label}}</text>
|
|
</view>
|
|
<view class="n-flex-column n-align-center n-ms-bottom-ll" v-if="content">
|
|
<text class="n-size-base n-ms-top-ll n-color-second">{{content}}</text>
|
|
</view>
|
|
<u-form class="n-ms-top-l" v-else labelWidth="40rpx" labelPosition="left">
|
|
<u-form-item :class="['n-radius-' + inputRadius, 'n-bg-page', 'n-ps-base', 'n-ms-bottom-base']">
|
|
<u-input v-model="input" :type="inputType" :focus="true" :maxlength="maxlength" :placeholder="place" border="none" clearable>
|
|
<template v-slot:suffix>
|
|
<text class="n-size-ss n-color-error" v-if="captcha" @click="sendSms">{{code_text}}</text>
|
|
</template>
|
|
</u-input>
|
|
</u-form-item>
|
|
</u-form>
|
|
<u-button class="n-ms-top-base" @click="submit" :text="buttonText" :color="buttonColor" type="error" shape="circle" throttleTime="1000"></u-button>
|
|
</view>
|
|
</u-popup>
|
|
<!-- 验证码 -->
|
|
<u-code ref="code" @change="changeCode" :seconds="seconds" :uniqueKey="captchaType" endText="获取验证码"></u-code>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
name:"m-popup",
|
|
props: {
|
|
label: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: '提示'
|
|
},
|
|
place: {
|
|
type: String,
|
|
default: '请输入内容'
|
|
},
|
|
content: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
captcha: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
padding: {
|
|
type: String,
|
|
default: 'base'
|
|
},
|
|
redirect: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
maxlength: {
|
|
type: [String, Number],
|
|
default: 10
|
|
},
|
|
inputType: {
|
|
type: String,
|
|
default: 'text'
|
|
},
|
|
buttonText: {
|
|
type: String,
|
|
default: '立即提交'
|
|
},
|
|
captchaType: {
|
|
type: String,
|
|
default: 'notice'
|
|
},
|
|
inputRadius: {
|
|
type: String,
|
|
default: 'll'
|
|
},
|
|
buttonColor: {
|
|
type: String,
|
|
default: '#fc3463'
|
|
},
|
|
customStyle: {
|
|
type: Object,
|
|
default(){
|
|
return {width:'600rpx',marginBottom:'200rpx'}
|
|
}
|
|
},
|
|
closeOnClickOverlay: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
input: '',
|
|
seconds: 60,
|
|
code_text: '获取验证码'
|
|
};
|
|
},
|
|
methods: {
|
|
// 展示弹窗
|
|
open() {
|
|
// 发送验证码
|
|
if(this.captcha){
|
|
this.sendSms()
|
|
}
|
|
this.$refs['popup'].open()
|
|
},
|
|
// 关闭弹窗
|
|
close() {
|
|
uni.hideKeyboard()
|
|
this.$refs['popup'].close()
|
|
},
|
|
// 提交数据
|
|
submit() {
|
|
// 跳转链接
|
|
if(this.redirect) {
|
|
return uni.navigateTo({
|
|
url:this.redirect
|
|
})
|
|
}
|
|
// 输入提示
|
|
if(!this.input) return showToast(this.place)
|
|
|
|
this.$emit('submit', this.input)
|
|
|
|
this.close()
|
|
this.input = ''
|
|
},
|
|
// 获取验证码
|
|
sendSms() {
|
|
if(this.$refs['code'].canGetCode){
|
|
let userinfo = getApp().globalData.userinfo
|
|
sendSms({type:this.captchaType, mobile:userinfo.mobile}).then(res=>{
|
|
this.$refs['code'].start()
|
|
})
|
|
}
|
|
},
|
|
// 验证码变化
|
|
changeCode(evt) {
|
|
this.code_text = evt
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
|
|
</style> |