137 lines
4.2 KiB
Vue
137 lines
4.2 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view class="info">
|
||
<div class="cro">
|
||
<!-- :error-type="['border-bottom']" -->
|
||
<u-form :model="form" ref="uForm" label-width="200" :label-style="{ color: '#333333', fontSize: '34rpx', fontWeight: 'bold' }">
|
||
<view style="text-align: center;color: #333;font-size: 36rpx;font-weight: bold;">添加收货地址</view>
|
||
<u-form-item label="收货人" prop="name"><u-input v-model="form.name" placeholder="请填写收货人姓名" /></u-form-item>
|
||
<u-form-item label="手机号码" prop="phone"><u-input placeholder="请填写收货人手机号" v-model="form.phone" type="number" maxlength="11"></u-input></u-form-item>
|
||
<u-form-item label="验证码" prop="code">
|
||
<u-input placeholder="请输入验证码" v-model="form.code" type="text"></u-input>
|
||
<view slot="right" @click="getCode" style="color: #F09B38;">{{ codeTips }}</view>
|
||
</u-form-item>
|
||
<u-form-item label="单位"><u-input v-model="form.sex" type="text" placeholder="请填写单位名称" /></u-form-item>
|
||
<u-form-item label="选择地区"><u-input v-model="form.sex2" type="select" placeholder="请选择省市区" /></u-form-item>
|
||
<u-form-item label="详细地址" prop="sex3"><u-input v-model="form.sex3" type="text" placeholder="街道楼栋门牌号" /></u-form-item>
|
||
</u-form>
|
||
<u-button @click="submit">提交</u-button>
|
||
<u-picker mode="region" v-model="show" :area-code="arrCode" @confirm="change"></u-picker>
|
||
<u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
|
||
</div>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { getInfo } from '@/common/api.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
form: {
|
||
name: '',
|
||
intro: '',
|
||
phone: '',
|
||
sex: '',
|
||
sex3: ''
|
||
},
|
||
show: false,
|
||
val: '',
|
||
arrCode: [],
|
||
radio: '',
|
||
switchVal: false,
|
||
codeTips: '',
|
||
rules: {
|
||
name: [
|
||
{
|
||
required: true,
|
||
message: '请输入姓名',
|
||
// 可以单个或者同时写两个触发验证方式
|
||
trigger: ['change', 'blur']
|
||
}
|
||
],
|
||
intro: [
|
||
{
|
||
required: true,
|
||
min: 5,
|
||
message: '简介不能少于5个字',
|
||
trigger: 'blur'
|
||
}
|
||
],
|
||
sex3: [
|
||
{
|
||
required: true,
|
||
message: '请输入详细地址',
|
||
trigger: 'blur'
|
||
}
|
||
]
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
submit() {
|
||
this.$refs.uForm.validate(valid => {
|
||
if (valid) {
|
||
console.log('验证通过')
|
||
} else {
|
||
console.log('验证失败')
|
||
}
|
||
})
|
||
},
|
||
codeChange(text) {
|
||
this.codeTips = text
|
||
},
|
||
// 获取验证码
|
||
getCode() {
|
||
if (this.$refs.uCode.canGetCode) {
|
||
// 模拟向后端请求验证码
|
||
uni.showLoading({
|
||
title: '正在获取验证码',
|
||
mask: true
|
||
})
|
||
setTimeout(() => {
|
||
uni.hideLoading()
|
||
// 这里此提示会被this.start()方法中的提示覆盖
|
||
this.$u.toast('验证码已发送')
|
||
// 通知验证码组件内部开始倒计时
|
||
this.$refs.uCode.start()
|
||
}, 2000)
|
||
} else {
|
||
this.$u.toast('倒计时结束后再发送')
|
||
}
|
||
},
|
||
change(e) {
|
||
this.val = e.province.label + e.city.label + e.area.label
|
||
this.arrCode = [e.province.value, e.city.value, e.area.value]
|
||
}
|
||
},
|
||
// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
|
||
onReady() {
|
||
this.$refs.uForm.setRules(this.rules)
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import '/static/css/quill.core.css';
|
||
@import '/static/css/quill.snow.css';
|
||
.content {
|
||
height: 100vh;
|
||
background: url(../../static/bgi.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
padding: 52rpx 25rpx 34rpx;
|
||
.info {
|
||
background-color: #ffffff;
|
||
border-radius: 15px;
|
||
.cro {
|
||
padding: 40rpx;
|
||
// /deep/.uni-input-placeholder,
|
||
/deep/.uni-input-input {
|
||
color: #666 !important;
|
||
font-size: 30rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|